wxapp webpack plugin

wxapp-webpack-plugin

WeChat applet webpack plug-in

Why use webpack

Many front-end developers have used webpack, and developing JavaScript projects through webpack can bring many benefits.

• Supports introducing and using node_modules modules through yarn or npm
• Support rich and flexible loaders and plugins
• Support alias
• There are many more...

Why use this plugin

• WeChat mini program development requires multiple entry files (such as app.js , app.json , pages/index/index.js etc.). To use this plug-in, you only need to import app.js , and the other files will be automatically imported.
• If multiple entry files (such as pages/index/index.js and pages/logs/logs.js ) import the same module, this plug-in can avoid packaging the same module repeatedly.
• Supports automatic copying tabbar images in app.json (v0.17.0 or above)

How to use

Install

yarn add -D wxapp-webpack-plugin

Configure webpack

1. Introduce { app: './src/app.js' } on entry , where ./src/app.js is app.js required for WeChat applet development. Note key must be app and value supports array)

2. Set filename: '[name].js' on output filename: '[name].js'。 Note that [name].js here is because webpack will package and generate multiple files, and the file names will be output according to the [name] rule.

3. Add new WXAppWebpackPlugin() to plugins

loader usage tips

In order to enable webpack to compile and output non- .js files, various loaders must be added as needed during configuration. The author here recommends using the following loaders are very useful for WeChat applet development:

• file-loader: used to output files such as *.json , *.wxss , *.jpg
• css-loader: enables webpack to compile or process files referenced on *.wxss
• wxml-loader: enables webpack to compile or process files referenced on *.wxml

Developers can also use loader such as sass-loader according to their own needs and habits.

For complete project development scaffolding, please view wxapp-boilerplate

API

WXAppWebpackPlugin

usage

webpack.config.babel.js

 import WXAppWebpackPlugin from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  plugins : [
    // ...other,
    new WXAppWebpackPlugin ( options )
  ] ,
} ; 

Options

All Options are optional

• clear (<Boolean>): Clear the dist directory when starting webpack . Default is true
• commonModuleName (<String>): Common js file name. Default is common.js
• extensions (<Array<String>>): Script file suffix name. Default is ['.js']

Targets

Webpack target value currently includes Targets.Wechat and Targets.Alipay . If not configured, webpack target will be automatically set to Targets.Wechat . If you need to develop an Alipay applet, change it to Targets.Alipay . Developers can also dynamically output through configurations such as process.env.TARGET .

Example

webpack.config.babel.js

 import WXAppWebpackPlugin , { Targets } from 'wxapp-webpack-plugin' ;
export default {
  // ...configs,
  target : Targets [ process . env . TARGET || 'Wechat' ] ,
} ; 

hint

• The program development method is the same as the WeChat applet development document. Developers need to create files such as app.js , app.json , app.wxss , pages/index/index.js in src (source) directory for development.

License

MIT © Cap32