前言

此方案基于 webpack 构建实现，构建 web 端代码的流程无需做任何调整，此处只介绍如何将源码构建成小程序端代码。

编写 webpack 配置

新建一个 webpack.mp.config.js 文件，用于小程序端代码的构建，假设你要构建的小程序代码放到 ./miniprogram 目录中：

  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  4. const { VueLoaderPlugin } = require('vue-loader')
  5. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  6. const TerserPlugin = require('terser-webpack-plugin')
  7. const MpPlugin = require('mp-webpack-plugin') // 用于构建小程序代码的 webpack 插件
  9. const isOptimize = true // 是否压缩业务代码，开发者工具可能无法完美支持业务代码使用到的 es 特性，建议自己做代码压缩
  11. module.exports = {
  12.     mode: 'production',
  13.     entry: {
  14.         // js 入口
  15.         home: page.resolve(__dirname, '../src/home/main.mp.js'),
  16.         list: page.resolve(__dirname, '../src/list/main.mp.js'),
  17.         detail: page.resolve(__dirname, '../src/detail/main.mp.js'),
  18.     },
  19.     output: {
  20.         path: path.resolve(__dirname, './miniprogram/common'), // 放到小程序代码目录中的 common 目录下
  21.         filename: '[name].js', // 必需字段，不能修改
  22.         library: 'createApp', // 必需字段，不能修改
  23.         libraryExport: 'default', // 必需字段，不能修改
  24.         libraryTarget: 'window', // 必需字段，不能修改
  25.     },
  26.     target: 'web', // 必需字段，不能修改
  27.     optimization: {
  28.         runtimeChunk: false, // 必需字段，不能修改
  29.         splitChunks: { // 代码分割配置，不建议修改
  30.             chunks: 'all',
  31.             minSize: 1000,
  32.             maxSize: 0,
  33.             minChunks: 1,
  34.             maxAsyncRequests: 100,
  35.             maxInitialRequests: 100,
  36.             automaticNameDelimiter: '~',
  37.             name: true,
  38.             cacheGroups: {
  39.                 vendors: {
  40.                     test: /[\\/]node_modules[\\/]/,
  41.                     priority: -10
  42.                 },
  43.                 default: {
  44.                     minChunks: 2,
  45.                     priority: -20,
  46.                     reuseExistingChunk: true
  47.                 }
  48.             }
  49.         },
  51.         minimizer: isOptimize ? [
  52.             // 压缩CSS
  53.             new OptimizeCSSAssetsPlugin({
  54.                 assetNameRegExp: /\.(css|wxss)$/g,
  55.                 cssProcessor: require('cssnano'),
  56.                 cssProcessorPluginOptions: {
  57.                     preset: ['default', {
  58.                         discardComments: {
  59.                             removeAll: true,
  60.                         },
  61.                         minifySelectors: false, // 因为 wxss 编译器不支持 .some>:first-child 这样格式的代码，所以暂时禁掉这个
  62.                     }],
  63.                 },
  64.                 canPrint: false
  65.             }),
  66.             // 压缩 js
  67.             new TerserPlugin({
  68.                 test: /\.js(\?.*)?$/i,
  69.                 parallel: true,
  70.             })
  71.         ] : [],
  72.     },
  73.     module: {
  74.         rules: [
  75.             // loaders 配置。这里需要注意的是，部分在 wxss 不支持的样式需要剔除，比如 ie hack 代码，可以使用 postcss 的 stylehacks 插件剔除；对于资源文件来说，需要转成 base64 或者线上资源链接，下面是一个简单的示例：
  76.             // {
  77.             //     test: /\.(png|jpg|gif|svg|eot|woff|woff2|ttf)$/,
  78.             //     use: [{
  79.             //         loader: 'url-loader',
  80.             //         options: {
  81.             //             limit: 1024,
  82.             //             name: '[name]_[hash:hex:6].[ext]',
  83.             //             publicPath: 'https://test.miniprogram.com/res', // 对于资源文件直接使用线上的 cdn 地址
  84.             //             emitFile: false,
  85.             //         }
  86.             //     }],
  87.             // },
  88.         ]
  89.     },
  90.     plugins: [
  91.         new webpack.DefinePlugin({
  92.             'process.env.isMiniprogram': process.env.isMiniprogram, // 注入环境变量，用于业务代码判断
  93.         }),
  94.         new MiniCssExtractPlugin({
  95.             filename: '[name].wxss',
  96.         }),
  97.         new VueLoaderPlugin(),
  98.         new MpPlugin({
  99.             // 插件配置，下面会详细介绍
  100.         }),
  101.     ],
  102. }

编写 webpack 插件配置

这里的 webpack 插件配置即上面提到的 MpPlugin 的配置，内容如下：

  1. module.exports = {
  2.     // 页面 origin，默认是 https://miniprogram.default
  3.     origin: 'https://test.miniprogram.com',
  4.     // 入口页面路由，默认是 /
  5.     entry: '/',
  6.     // 页面路由，用于页面间跳转
  7.     router: {
  8.         // 路由可以是多个值，支持动态路由
  9.         home: [
  10.             '/(home|index)?',
  11.             '/test/(home|index)',
  12.         ],
  13.         list: [
  14.             '/test/list/:id',
  15.         ],
  16.         detail: [
  17.             '/test/detail/:id',
  18.         ],
  19.     },
  20.     // 特殊路由跳转
  21.     redirect: {
  22.         notFound: 'home',
  23.         accessDenied: 'home',
  24.     },
  25.     // 项目配置，会被合并到 project.config.json
  26.     projectConfig: {
  27.         appid: 'wx1234567890',
  28.         projectname: 'kbone-demo',
  29.     },
  30. }

更多详细配置信息可以点此查看。

新增入口文件

此处小程序 webpack 配置所使用的入口文件和 web 端有一定区别，假设 web 端是这样的：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. // 注入到页面上的 id 为 app 的 dom 节点上
  5. new Vue({
  6.     el: '#app',
  7.     render: h => h(App)
  8. })

那么小程序端所用到的入口则需要调整成如下：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. // 需要将创建根组件实例的逻辑封装成方法
  5. export default function createApp() {
  6.     // 在小程序中如果要注入到 id 为 app 的 dom 节点上，需要主动创建
  7.     const container = document.createElement('div')
  8.     container.id = 'app'
  9.     document.body.appendChild(container)
  11.     return new Vue({
  12.         el: '#app',
  13.         render: h => h(App)
  14.     })
  15. }

这是因为小程序中各个页面的逻辑端是统一跑在 appService 上的，需要对各个页面做隔离。为了方便做后续操作，需要将创建根组件实例的逻辑封装成方法暴露给适配层，调用此方法时会返回根组件实例。

执行构建

  1. 构建小程序代码：
  1. webpack --config webpack.mp.config.js
  1. 进入小程序代码目录，安装小程序依赖包：
  1. cd miniprogram
  2. npm install
  1. 使用小程序开发者工具直接打开此目录，并点击工具菜单下的构建 npm 按钮，之后便可预览构建好的小程序了。

PS：建议使用工具的 RC 版本或者 Nightly 版本，以支持 babelSetting 的 ignore 配置。

例子

我们准备了若干 demo，可以点此查看。

进阶

更多进阶用法和开发建议，可以点此查看。