wxmini-plugin-webpack

webpack5版本的微信小程序插件,让微信原生小程序的开发也能变成工程化。

使用

npm -i -D wxmini-plugin-webpack

js-template 案例

ts-template 案例

优势/好处

• 1.可以区分不同的环境变量，dev, production开发环境等等

• 2.无用代码筛检，剔除

• 3.@import， require， <wxs src'@src/test.wxs'></wxs>, json文件的组件引入 可以用别名引入，如@src, @common等

• 4.代码体积小，不会像uniapp, Taro，产生大量运行代码

• 5.支持ts，支持es6语法的import export deufalt

注意事项

• 子的.less的文件如果引入在父页面的less中，会合并到一个文件，.wxss文件后缀用@import引入的文件，不会合并一个文件

• 只有两个公共js文件，runtime.js和common.js

生产模式输出文件信息

webpack配置

// webpack配置

const  MiniProgramPlugin  = require('wxmini-plugin-webpack').plugin

module.exports = {
    ...,
    ...,
    module: {
      rules: [
        {
          test: /\.wxml$/,
          type: 'asset/resource',
          generator: {
            filename: '[path][name][ext]'
          },
          use: [
            'wxmini-plugin-webpack'
          ]
        },
        {
          test: /\.json/,
          type: 'asset/resource',
          generator: {
            filename: '[path][name][ext]'
          },
          use: [
            'wxmini-plugin-webpack'
          ]
        },
        {
          test: /\.wxs$/,
          type: 'asset/resource',
          generator: {
            filename: '[path][name][ext]'
          },
          use: ['wxmini-plugin-webpack']
        },
        {
          test: /\.wxss/,
          type: 'asset/resource',
          generator: {
            filename: '[path][name][ext]'
          },
          use: ['wxmini-plugin-webpack']
        },
        ...,
        ...,
        ...
      ]
      },
    plugins: [
        new MiniProgramPlugin()
    ],
    ...,
    ...,
    ...
}

To-do

代办事项

• wxss文件代码压缩
• 输出打包文件信息
• 显示打包进度

本地调试

安装依赖
npm i

// 运行脚本
node example/build-examples.js resolve-template
或者
npm run dev
npm run build

npm源切换

npm config get registry

npm config set registry https://registry.npmjs.org/

npm config set registry https://registry.npmmirror.com

qq讨论群: 475870039