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: /\.$/ type: 'javascript/auto' use: loader: "file-loader" options: { const path = ; const reg = /app.$/; // 假定我的项目中自定义的 app.json 文件为:app.custom.json if path return path; // 还原成 app.json 输出 return path; }
1.0.5
- 修正 tabBar 解析的bug
安装说明
npm install webpack-miniprogram-plugin// oryarn add webpack-miniprogram-plugin
使用示例
具体参考 test/webpack.config.js
文件。
moduleexports = output: libraryTarget: 'var' // 必须 target: 'node' // 必须 plugins: 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 可以参照如下的配置:
moduleexports = module: rules: test: /\.styl$/ use: MiniCssExtractPluginloader 'css-loader' 'stylus-loader' test: /\.$/ use: MiniCssExtractPluginloader 'css-loader'
复制wxss模式
如果你希望插件对待 wxss 文件时,作为附加文件的模式处理的话,也是可以的,需要做如下的设置:
const path = ; moduleexports = module: rules: test: /\.$/ use: loader: 'file-loader' options: // 文件名路径名转换 plugins: src dist exts: wxss: true // 开启 wxss 作为附件打包 ;