【webpack】配置

[aromameng]

使用craco自定义插件

/* craco.config.js */
const path = require('path');
const CracoAntDesignPlugin = require('craco-antd');
const addDefinePlugin = require('./addDefinePlugin');

let webpackConfig = {
  plugins: [
    {
      // 自定义主题
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@primary-color': '#1DA57A',
        },
      },
    },
    {
      // 自定义插件
      plugin: addDefinePlugin,
      options: {
          // preText: "Will log the webpack config:" 
      }
    }
  ],
  babel: {
    plugins: [
      // 支持装饰器语法
      ["@babel/plugin-proposal-decorators", { legacy: true }],
    ]
  },
  webpack: {
    // 别名
    alias: {
      "@": path.resolve("src"),
      "@utils": path.resolve("src/utils"),
    }
  },
};

module.exports = webpackConfig;

添加addDefinePlugin.js文件

/* addDefinePlugin.js */
const webpack = require('webpack');

module.exports = {
    overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
        const argv = require('minimist')(process.argv.slice(2));
        webpackConfig.plugins.push(new webpack.DefinePlugin({
            "process.env.ENV": JSON.stringify(argv.ENV),
        }));
        // Always return the config object.
        return webpackConfig;
    }
};

[aromameng]

更多 craco的用法，参考 https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#webpack-api

[aromameng]

tree-shaking介绍： https://www.jianshu.com/p/7994b1fc6dfe