webpack 配置

Megalo 在构建时依赖 @megalo/target 和 @megalo/template-compiler。利用 createMegaloTarget 方法创建 webpack 的构建目标，通过 platform 和 compiler 配置好模版编译器和目标平台。

  1. const createMegaloTarget = require( '@megalo/target' )
  2. const compiler = require( '@megalo/template-compiler' )
  3. const VueLoaderPlugin = require( 'vue-loader/lib/plugin' )
  4. const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' )
  5. const platform = 'wechat';      // 选择构建的平台（微信：wechat，支付宝：alipay）
  6. const cssExt = 'wxss';          // 生产的 css 文件后缀（微信：wxss，支付宝：acss）
  7. module.exports = {
  8.   target: createMegaloTarget( {
  9.     compiler,
  10.     platform
  11.   } ),
  12.   // 注意：`devtool` 不能设置成 `eval` 类型的 sourcemap，如 `cheap-eval-source-map`，因为小程序中不允许执行 `eval`。
  13.   devtool: 'source-map',
  14.   entry: {
  15.     // 应用入口
  16.     'app': _.resolve( 'src/index.js' ),
  17.     // ... cli 中封装了读取主文件 index.js 的方法，将自动生成 entry，无需再次配置
  18.   },
  19.   output: {
  20.     path: _.resolve( `dist` ),
  21.     filename: 'static/js/[name].js',
  22.     chunkFilename: 'static/js/[id].js'
  23.   },
  24.   optimization: {
  25.     splitChunks: {
  26.       cacheGroups: {
  27.         commons: {
  28.           test: /[\\/]node_modules[\\/]|megalo[\\/]/,
  29.           name: 'vendor',
  30.           chunks: 'all'
  31.         }
  32.       }
  33.     }
  34.   },
  35.   resolve: {
  36.     extensions: ['.vue', '.js', '.json'],
  37.     alias: {
  38.       // 重定 vue 指向
  39.       'vue': 'megalo',
  40.       '@': _.resolve('src')
  41.     },
  42.   },
  43.   module: { /* 普通的 module 配置 */},
  44.   plugins: [
  45.     new VueLoaderPlugin(),
  46.     new MiniCssExtractPlugin( {
  47.       filename: `static/css/[name].${cssExt}` // 重新定义后缀
  48.     } )
  49.   ]
  50. }

@megalo/target 的职责单一，主要作用添加一些插件和 loader，用于解析和生成小程序相关的代码，因此还需要依赖其他构建工具：

  • vue-loader：需要 vue-loader（^14） 加载和解析 .vue 文件；
  • mini-css-extract-plugin：用来将 css 提取到 .wxss 文件。

以上配置为 Megalo 的必须配置，应尽量避免修改以免导致解析出错