webpack打包微信小程序

旧城等待， 2022-08-31 15:30 396阅读 0赞

## webpack打包微信小程序目的： ##

编写小程序代码时也可以引入 npm 上的插件， 通过 webpack 打包后可以大大减小小程序代码的体积

## 项目目录： ##

## 按照依赖 ##

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