https://mp.weixin.qq.com/s/0Sq9Z0i9Q3N0likFlZB0rQ

编译 scss

npm i node-sass sass-loader -D

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

html-inline-css-webpack-plugin

将 html 模板中的占位符替换为内联 css

MiniCssExtractPlugin

https://webpack.js.org/plugins/mini-css-extract-plugin/

动态导入配置

https://webpack.js.org/api/module-methods/

js 压缩

uglifyjs-webpack-plugin 已废弃

改用 https://github.com/webpack-contrib/terser-webpack-plugin

别名设置无效

需要再配置下 tslint ，然后重启

https://stackoverflow.com/questions/40443806/webpack-resolve-alias-does-not-work-with-typescript

注意

import utils from '@Utils' 

这种要写成下面这样才不会报红

import utils from '@Utils/index' 

less-loader 修改 antd 变量

module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级，直接配置选项在 options 下。
+         modifyVars: {
+           'primary-color': '#1DA57A',
+           'link-color': '#1DA57A',
+           'border-radius-base': '2px',
+         },
+         javascriptEnabled: true,
+       },
+     },
    }],
    // ...other rules
  }],
  // ...other config
}