build-plugin-ascm/index.js

ascm项目使用的build-scripts插件

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = ({ context, registerCliOption, onGetWebpackConfig }) => {
  // 注册命令行参数--product
  registerCliOption({
    name: 'product',
    commands: ['start', 'build', 'test'],
  });
  const { rootDir, commandArgs } = context;
  const { product = 'ecs', dark, dm } = commandArgs;
  const Theme = dark ? 'dark' : 'aliyun';
  onGetWebpackConfig((config) => {
    config.output.path(path.join(rootDir, `./build/${product}`))
      .filename(`js/[name].js`)
      .publicPath(`/assets/${product}/`)
      .chunkFilename('js/[name][hash:8].chunk.js');
    // 删除HtmlWebpackPlugin
    config.plugins.delete('HtmlWebpackPlugin');
    // 删除其他插件对于url-loader的配置，重新定义
    ['woff2', 'ttf', 'eot', 'svg', 'img'].forEach(type => {
      config.module.rules.delete(type);
    });
    config.module.rule('url-loader')
      .test(/\.(bmp|png|jpg|jpeg|gif|woff|woff2|eot|ttf|otf|svg)((\?|#).*)?$/)
      .use('url-loader')
      .loader(require.resolve('url-loader'))
      .options({
        limit: 8192,
        name: 'img/[name].[ext]',
      });
    // 修改插件
    config.plugin('MiniCssExtractPlugin')
      .tap(([options]) => {
        return [
          {
            ...options,
            filename: `css/[name].${Theme}.css`,
            chunkFilename: `css/[id].${Theme}.css`,
          },
        ];
      })
     .end()
     .plugin('CopyPlugin')
     .use(CopyPlugin, [[{ from: 'src/locale', to: 'locale' }]])
     .end()
     .plugin('BrowserSyncPlugin')
     .use(BrowserSyncPlugin, [
       {
         ui: false,
         open: false,
         host: '127.0.0.1',
         port: 9000,
         proxy: `http://127.0.0.1:7001/module/${product}`,
         notify: false,
       },
     ]);
  });
  // 修改暗色构建
  if (dm) {
    onGetWebpackConfig('dark', (config) => {
      config.output.filename('js/[name]-dark.js')
        .chunkFilename('js/[name][hash:8].chunk.js');
      config.plugin('MiniCssExtractPlugin')
      .tap(([args]) => [
        {
          ...args,
          filename: 'css/[name].dark.css',
          chunkFilename: 'css/[id].dark.css',
        },
      ]);
    });
  }
};