• webpack 配置

    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 的必须配置，应尽量避免修改以免导致解析出错