代码拉取完成，页面将自动刷新
webpack微信小程序开发/打包插件，提供多环境的微信小程序开发/打包环境，实现开发/测试/产品模式的分离，支持不同开发用户自定义的小程序配置文件，通过 webpack.DefinePlugin 可以轻松解决不同环境下的配置分离。
主要特性：
1.0.3
1.0.4
mockMain 参数，创建一个模拟入口，来替代 main ，用于兼容一个小程序项目多个开发者参与，需要有不同的配置入口。对应的 json-loader 的写法，参考如下：{
test: /\.(json)$/,
type: 'javascript/auto',
use: {
loader: "file-loader",
options: {
name: (filename) => {
const path = replaceDS(pathUtil.relative(srcPath, filename));
const reg = /app.(([a-z0-9-_]+).json)$/; // 假定我的项目中自定义的 app.json 文件为：app.custom.json
if (path.match(reg)) {
return path.replace(reg, 'app.json'); // 还原成 app.json 输出
}
return path;
},
},
}
}
1.0.5
npm install webpack-miniprogram-plugin
// or
yarn add webpack-miniprogram-plugin
具体参考 test/webpack.config.js 文件。
module.exports = {
output: {
libraryTarget: 'var', // 必须
},
target: 'node', // 必须
plugins: [
new MiniProgramPlugin(src, dist, options),
]
};
options 的参考：
const options = {
main: 'app.json',
mockMain: 'app.my.json', // 创建一个模拟入口
debug: false,
assets: 'assets',
assetsChunkName: '__assets_chunk_name__',
bootstrapModuleName: 'bootstrap.js',
// 公共附件后缀名，以 object 结构，如果要去掉某类文件，value 取 false
exts: {
json: true,
wxml: true,
wxss: false,
},
// 脚本后缀名
scriptExts: {js: true},
// 需要检查 io stat 的文件后缀，wxss 不是必选项，可能存在 page 或者 component 没有 wxss 文件
checkStatExts: {wxss: true},
// app.js - app.json 的特定附加文件。
app: {
exts: {wxml: false},
// 附加文件
files: [ // 不附加文件的话，files: false
'sitemap.json', 'project.config.json',
],
},
// page 范围内的设定
page: {
// 使用公共的后缀文件名
// exts: {wxml: true},
files: [],
},
// component 范围内的设定
component: {
// exts: {wxml: true},
files: [],
},
// 自定义路径匹配指定附加文件
custom: {
// 指定 pages/index/index 的附加设定
'pages/index/index': {
files: ['ok.json'],
},
},
}
开发中引入 js 的路径，请严格遵照 npm 的标准，当前目录下的文件，应该是 require('./mobx') 或者 require('./any-module') ，require('loadsh') 表示引入 node_modules 下的 module。否则会导致 webpack 编译处理 js 的依赖关系时报错。
component 支持绝对路径和相对路径的两种写法：../../components/hello/world 或 /components/hello/world 。
已经支持检索 app.json 中的 pages, subPackages, tabBar ，以及各个 json 中定义的 useComponents 字段。
样式文件，推荐在对应的 js 文件中引入（require 或 import），这样的好处是，可以使用 mini-css-extract-plugin 或 extract-css-chunks-webpack-plugin ，来打包分离成对应的 wxss 文件，最终输出的效果更好。
loaders 可以参照如下的配置：
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
},
{
test: /\.(css|wxss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
]
}
}
如果你希望插件对待 wxss 文件时，作为附加文件的模式处理的话，也是可以的，需要做如下的设置：
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.(wxss)$/,
use: {
loader: 'file-loader',
options: {
name: (filename) => replaceDS(path.relative(srcPath, filename)), // 文件名路径名转换
},
},
},
]
},
plugins: [
new MiniProgramPlugin(src, dist, {
exts: {
wxss: true, // 开启 wxss 作为附件打包
}
}),
]
};
本项目的一个出发点，就是为了能够彻底的活用 webpack 自身强大的可定制化功能，不考虑做脚手架，将配置内定，所以以下配置内容可能略微硬核。
const src = 'src';
const srcPath = pathUtil.resolve(process.cwd(), src);
// 转路径的分隔符号，主要针对windows
const replaceDS = (path) => path.replace(/[\\/]+/g, '/');
const options = {
// 指定以一个用户自己的 app.user.json 来替代 app.json，也是为了隔离不同用户版本、不同打包环境
// 这样能彻底的使得参与项目的开发者，只需要关注自己那部分配置即可
mockMain: 'app.user.json',
app: {
files: [ // 指定App的附加文件
// 使用自定义的 project.config.json 来提供默认项目配置 ，确保开发环境和发布环境分离，
// 这样可以做到每个开发者使用自己的配置，或者是同一个项目可以打包成多个项目
'project.config.dev.user.json',
// wxs 文件支持
'wxs/utils.wxs',
]
}
};
// webpack 的配置
const webpackConfig = {
mode: env === 'development' ? 'development' : 'production',
entry: {
app: [`./${src}/app.js`],
},
output: {
filename: '[name].js',
libraryTarget: 'var',
path: pathUtil.resolve(__dirname, dist),
},
target: 'node',
module: {
rules: [
// 传统 js 的 babel 转译
{
test: /\.(js)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/env'],
plugins: [
['@babel/plugin-proposal-decorators', {
"legacy": true,
}],
['@babel/plugin-proposal-class-properties', {
"loose": true,
}],
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-transform-block-scoping',
'@babel/plugin-transform-computed-properties',
'@babel/plugin-proposal-object-rest-spread',
],
},
},
],
},
// 图片处理
{
test: /\.(png|jpg)$/,
use: {
loader: "file-loader",
options: {
name: (filename) => {
return replaceDS(pathUtil.relative(srcPath, filename));
},
},
},
},
// json 文件处理
{
test: /\.(json)$/,
type: 'javascript/auto', // 新版webpack对json处理方式不同了，需要加这一句
use: {
loader: "file-loader",
options: {
name: (filename) => {
const path = replaceDS(pathUtil.relative(srcPath, filename));
// 以下就是将 mock 的 json 文件，替代为实际有效的 app.json 和 project.config.json 来输出
const appReg = /app.(([a-z0-9-_]+).json)$/; // 假定我的项目中自定义的 app.json 文件为：app.custom.json
const projectReg = /project.config.([a-z0-9-_]+)(.([a-z0-9-_]+))?.json$/;
if (path.match(appReg)) {
return path.replace(appReg, 'app.json'); // 还原成 app.json 输出
}
if (path.match(projectReg)) {
return path.replace(projectReg, 'project.config.json');
}
return path;
},
},
},
},
// wxml
{
test: /\.(wxml)$/,
use: {
loader: "file-loader",
options: {
name: (filename) => {
return replaceDS(pathUtil.relative(srcPath, filename));
},
},
},
},
// wxs 文件 也用 babel 来处理
{
test: /\.(wxs)$/,
use: [
{
loader: "file-loader",
options: {
name: (filename) => {
return replaceDS(pathUtil.relative(srcPath, filename));
},
},
},
{
loader: 'babel-loader',
options: {
presets: ['@babel/env'],
plugins: [
['@babel/plugin-proposal-decorators', {
"legacy": true,
}],
['@babel/plugin-proposal-class-properties', {
"loose": true,
}],
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-transform-block-scoping',
'@babel/plugin-transform-computed-properties',
'@babel/plugin-proposal-object-rest-spread',
],
},
},
],
},
// 这个项目使用了 stylus
{
test: /\.styl$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
},
// 一般的 css
{
test: /\.(css|wxss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
// 这里主要是因应不同 env 混入不同的 JS 常量，比如 API 地址，请参考 webpack/DefinePlugin
webpackPredef(env, predef.webpack, env.custom),
// 这里主要是因应不同的 env 的 stylus 全局常量，比如 CDN base url，请参考 stylusLoader.OptionsPlugin。
new stylusLoader.OptionsPlugin({
default: {
use: [stylusPredef(env, predef.stylus)],
},
}),
new MiniProgramPlugin(src, dist, options),
new MiniCssExtractPlugin(
{
filename: "[name].wxss",
},
),
],
devtool: 'inline',
optimization: {
splitChunks: {
cacheGroups: {
// src/utils, src/lib, src/model, src/store, src/actions, node_modules 路径下的代码，合并打包成一个独立的 lib.js 文件
modules: {
test: /([\\/](utils|lib|model|store|actions|node_modules)[\\/])/,
name: 'lib',
minSize: 0,
minChunks: 1,
chunks: 'all',
},
},
},
},
};
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型