生产环境处理

提取css文件

webpack4中可以使用 mini-css-extract-plugin

css兼容新处理

postcss-loader 需要安装 postcss-preset-env

配置postcss.config.js

module.exports = {
  plugins: [
    require('postcss-preset-env'),
  ]
}

添加浏览器版本配置文件 .browserslistrc

[production]
> 1%
ie 10
[modern]
last 1 chrome version

在webpack.config.js中使用loader

post默认使用的是 .browserslistrc 生产环境的配置，开发环境需要手动修改 process.env.NODE_ENV='devlopment' 和 webpack.config.js中的mode没有关系

压缩css

**css-minimizer-webpack-plugin**直接使用无需配置

编译时检查语法规则

eslint-webpack-plugin

一定要在webpack.config.js中配置 exclude: /node_modules/,只检查自己的代码

eslint-plugin-react-hooks 在react-hooks中使用

js兼容处理

配置babel-loader 需要安装@babel/core 添加 .babelrc 文件

使用 preset-env 同样存在问题

{
  "presets": [
    [
      "@babel/preset-env",
      {
        // 把用到的polyfill按需引入，依赖core-js
        "useBuiltIns": "useage",
        "corejs":3
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react",
    "@babel/plugin-transform-runtime"
  ]
}

压缩html

添加html-webpack-plugin配置项

new HtmlWebpackPlugin({
  template: path.resolve(__dirname, 'src/index.html'),
  minify:{
    collapseWhitespace: true,// 移除空白
    removeComments: true,// 移除注释
  }
})

打赏