webpack打包微信小程序
目录
webpack打包微信小程序
webpack打包微信小程序目的:
编写小程序代码时也可以引入 npm 上的插件, 通过 webpack 打包后可以大大减小小程序代码的体积
项目目录:
.项目目录
|- plugin
|- loadpath.js
|- src // 把小程序的代码放到 src 文件夹内
|- cloudfunctions // 创建云开发的目录
|- miniprogram // 开发者工具创建小程序时存放小程序初始代码的目录
|- webpack.config.js // 打包配置
按照依赖
cd 项目目录
npm init --yes
npm i --save-dev webpack webpack-cli copy-webpack-plugin clean-webpack-plugin // 安装 webpack
npm i --save-dev @babel/core @babel/preset-env babel-loader // 安装 babel 相关依赖
npm i lodash // 安装小程序用到的外来插件 这里你可以安装你想要的插件
webpack.config.js
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin')
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin')
const loadpath = require('./plugin/loadpath')
const srcdir = path.resolve(__dirname, 'src')
const putdir = path.resolve(__dirname, 'dist')
module.exports = {
entry: (new loadpath).init({
src: path.resolve(srcdir, 'miniprogram/app.js')
}),
// entry: { // (上面的 entry 是一种自动生成的方法) 就是将每个页面内的 js 都先用 webpack 打包 如下:
// 'app':'./app.js',
// 'pages/cart/cart':'./pages/cart/cart.js', // 这里面就可以引入类似 lodash 这种插件了
// 'pages/detail/detail':'./pages/detail/detail.js',
// 'pages/index/index':'./pages/index/index.js',
// 'pages/order/order':'./pages/order/order.js',
// 'pages/submit/submit':'./pages/submit/submit.js',
// },
output: {
filename: '[name].js',
path: path.resolve(putdir, 'miniprogram')
},
module: {
rules: [{
test: /js$/,
use: 'babel-loader'
}]
},
plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false,
}),
new CopyPlugin({
patterns: [{
from: path.resolve(srcdir, 'cloudfunctions'),
to: path.resolve(putdir, 'cloudfunctions')
}, {
from: path.resolve(srcdir, 'miniprogram'),
to: path.resolve(putdir, 'miniprogram'),
globOptions: {
ignore: ['**/*.js'], // 不复制 js 文件,因为js已经打包好了
}
}]
})
]
};
plugin/loadpath.js:
const path = require('path')
const fs = require('fs')
const replaceExt = require('replace-ext') // npm i replace-ext -D
var minidir = null
function _inflateEntries (entries = [], entry) {
const configFile = replaceExt(entry, '.json')
const content = fs.readFileSync(configFile, 'utf8')
const config = JSON.parse(content)
const items = config.pages
if (typeof items === 'object') {
Object.values(items).forEach(item => {
inflateEntries(entries, item)
})
}
}
function inflateEntries (entries, entry) {
entry = path.resolve(minidir, entry)
if (entry != null && !entries.includes(entry)) {
replaceExt(entry, '.js')
entries.push(entry)
_inflateEntries(entries, entry)
}
}
class loadpath {
constructor () {
this.entries = []
}
init (options) {
minidir = path.resolve('./src/miniprogram')
inflateEntries(this.entries, options.src)
const output = {}
this.entries.map(item => {
output[replaceExt(path.relative(minidir, item), '')] = item
})
return output
}
}
module.exports = loadpath