webpack5版本的微信小程序插件,让微信原生小程序的开发也能变成工程化。
npm -i -D wxmini-plugin-webpack
-
1.可以区分不同的环境变量，dev, production开发环境等等
-
2.无用代码筛检，剔除
-
3.
@import，require，<wxs src'@src/test.wxs'></wxs>,json文件的组件引入可以用别名引入，如@src, @common等 -
4.代码体积小，不会像uniapp, Taro，产生大量运行代码
-
5.支持ts，支持es6语法的
importexport deufalt
-
子的
.less的文件如果引入在父页面的less中，会合并到一个文件，.wxss文件后缀用@import引入的文件，不会合并一个文件 -
只有两个公共js文件，
runtime.js和common.js
// 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()
],
...,
...,
...
}代办事项
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent