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