webpack-miniprogram-plugin

介绍

webpack微信小程序插件，本来基于 gulp 4.0 搞了一个，但是 gulp 运行时间长了，就会很不稳定。而且 gulp 里面很多工具，都是预设好的，没有 webpack loader 那么强的可配置性。

主要借鉴了，mini-program-webpack-loader 和 wxapp-webpack-plugin 。

本来真的打算直接用，不打算重复造轮子，可是 wxapp-webpack-plugin 建基于 webpack 3.0， 而 mini-program-webpack-loader 做得有点太大了。

我目的是，尽量在 webpack 目前既有、常用的 loader 和 plugin 的基础上（以我们所熟知的webpack方式），来稍微的辅助和增强微信小程序的开发即可。

目前已经能很好的支持小程序（非插件）的打包，能很好的净化和简化最终输出出来的打包文件。

更新说明

1.0.3

• 增加对已经从 json 中移除的 page 和 component 的 chunk 移除（包括对应的 assets）。
• 优化 seekApp() 的入口。
• 去掉默认的 sitemap.json ，转为根据 app.json 探测。

1.0.4

• 插件 options 增加一个 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

• 修正 tabBar 解析的bug

安装说明

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引入的模式（推荐）

样式文件，推荐在对应的 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模式

如果你希望插件对待 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 作为附件打包
        	}
        }),
    ]
};