為什么要使用 webpack
很多前端開發(fā)者都使用過 webpack，通過 webpack 開發(fā) JavaScript 項目可以帶來很多好處
-
支持通過 yarn 或 npm 引入和使用 node_modules 模塊
-
支持豐富且靈活的 loaders 和 plugins
-
支持 alias
-
還有很多...
用法
安裝
-
yarn add -D wxapp-webpack-plugin
配置 webpack
-
在 entry 上引入 app.js 文件 （支持數(shù)組或?qū)ο蠓绞剑?/li>
-
在 plugins 數(shù)組添加 new WXAppWebpackPlugin()
完整 webpack.config.js 示例
-
const path = require('path');
-
const WXAppWebpackPlugin = require('wxapp-webpack-plugin');
-
-
module.exports = {
-
-
// 引入 `app.js`
-
entry: './src/app.js',
-
-
output: {
-
filename: 'bundle.js',
-
-
// 此處 `dist` 為微信開發(fā)者工具引入的開發(fā)目錄
-
path: path.resolve(__dirname, 'dist'),
-
},
-
plugins: [
-
-
// 引入插件
-
new WXAppWebpackPlugin(),
-
-
],
-
module: {
-
rules: [], // 各種 loaders 在這里添加
-
},
-
resolve: {
-
modules: ['src', 'node_modules'],
-
extensions: ['.js'],
-
},
-
};
現(xiàn)在可以通過在終端輸入 webpack -w 開始使用 webpack 開發(fā)微信小程序
注意
-
暫時只在 webpack@v2.3.2 - 測試通過，不確定其他版本下是否兼容性，歡迎提交反饋
-
程序的開發(fā)方式與 微信小程序開發(fā)文檔 一樣，開發(fā)者需要在 src （源）目錄創(chuàng)建 app.js、app.json、app.wxss、pages/index/index.js 之類的文件進行開發(fā)
-
默認下，src 目錄下的所有非 .js 文件（例如 app.json, pages/index/index.wxml 等等），會被自動復制到 dist 目錄
|
