MinaWebpackPlugin
MINA(微信小程序) Webpack 插件。
A Webpack plugin for MINA(WeChat MiniProgram).
- 基础打包 | basic packaging
- 模板打包 | packaging for templates
- 样式表打包与 CSS Modules | packaging for stylesheets and css modules
- 静态资源打包 | packaging for static resources
- 自定义组件打包 | packaging for components
- Source Maps
- remax 支持 | support for remax
概述 | Overview
- 适用于 Webpack 4 | For Webpack 4;
- 只支持微信小程序 | Compactable with WeChat MINA only;
- 支持直接为使用 Remax 的项目打包 | En duo avec Remax;
- 可使用各种 pre-processors (e.g. Pug, Stylus, e.t.c.) | Compactable with variant pre-processors;
- 支持 Component | Support MINA Component;
- 支持分包 | Support MINA sub-package packing;
- 自动合并依赖(使用 Webpack 的
SplitChunksPlugin
) | Merge dependencies into one single file usingSplitChunksPlugin
; - 自动通过配置文件生成
app.json
和页面的 JSON 配置 | Genarate but not hard-coding MINA configuration JSONs; - 已在生产环境中测试并使用 | Build for/in production.
配置项 | Plugin Configuration
// 必填,源码目录绝对对路径 // required, absolute path of src directory basePath: path // 选填,是否开启remax支持 // optional, enable remax support remax: false
开始使用 | Getting Started
在 Webpack 配置文件中初始化本插件,并将 entry
设置成 () => ({})
即可开始使用。
Initialize the plugin and set entry
to () => ({})
to get started.
// webpack.config.jsconst MinaWebpackPlugin = default // ... {} plugins:
mina-assets-loader
直接使用 mina-assets-loader
处理静态资源。
Just let mina-assets-loader
handle the static assets.
// src/pages/Index/index.js // webpack.config.js // ... module: rules: test: /\.$/ include: /src/ use: loader: 'mina-assets-loader'
模板 | Templates
在页面的主 entry
中直接 import
对应的模板文件即可。在 module rules 中加入 mina-assets-loader?template
以让插件正确处理正确模板。
Directly import
the template file in the page entry
to use templates. In order to let the plugin processing the template, add mina-assets-loader?template
in module rules.
// src/pages/Index/index.js // webpack.config.js // ... module: rules: test: /\.pug$/ include: /src/ use: loader: 'mina-assets-loader' options: template: true loader: 'wxml-loader' loader: 'pug-html-loader' options: locals: basedir: path pretty: true debug: false cache: true basedir:
样式表与 CSS Modules | Stylesheets and CSS Modules
在页面的主 entry
中直接 import
对应的样式表文件即可。在 module rules 中加入 mina-assets-loader?stylesheets
以让插件正确处理正确样式表。
如需使用 CSS Modules, 开启 css-loader
的 modules
选项并同时开启 mina-assets-loader
的 stylesheets
选项与 cssModules
选项。
Directly import
the stylesheets file in the page entry
to use templates. In order to let the plugin processing stylesheets, add mina-assets-loader?stylesheets
in module rules.
To use CSS Modules, enable modules
in css-loader
and enable both stylesheets
and cssModules
in mina-assets-loader
.
// src/pages/Index/index.js // webpack.config.js // ... module: rules: test: /\.sss$/ include: /src/ exclude: /\.module\.sss$/ use: loader: 'mina-assets-loader' options: stylesheets: true 'extract-loader' loader: 'css-loader' options: url: false 'sass-loader' test: /\.module\.sss$/ include: /src/ use: loader: 'mina-assets-loader' options: stylesheets: true cssModules: true loader: 'css-loader' options: modules: localIdentName: '[name]__[local]___[hash:base64:5]' url: false 'sass-loader'
授权
MIT