webpack4基础配置教程（二）-----生产环境

webpack4基础配置教程（二）-----生产环境

生产环境准备：

1.提取css为单独文件

• 安装插件

  npm install mini-css-extract-plugin@1 -d
  

• 引入插件

  //引入MiniCssExtractPlugin，用于提取css为单个文件
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  

• 配置loader

  //配置解析css
  {
      test: /\.css$/, //该loader要处理的文件
      use: [
           MiniCssExtractPlugin.loader, //
           'css-loader' //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
      ]
  },
  //配置解析less
  {
       test: /\.less$/, //该loader要处理的文件
       use: [
             MiniCssExtractPlugin.loader, 
             'css-loader',
             'less-loader' //将less文件编译成css文件
       ]
   },
  

• 配置plugins

  //实例化MiniCssExtractPlugin
  new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "css/index.css" //css输出的位置
  })
  

• 注意：由于提取独立文件，要从外部引入，所以可能会有路径问题，解决方案是在output配置中，添加：publicPath：‘/’，publicPath根据实际情况自行调整

2.css兼容性处理

• 都2022年，IE都无了，说实话兼容性问题了解即可

• 安装loader

  • npm install postcss postcss-loader postcss-preset-env -d
  • webpack4可能有版本的问题

• 因为css和less样式文件都要进行兼容性处理，所以我们定义好一个通用的配置：

  //css相关loader的配置
  const baseCssLoader = [
  	MiniCssExtractPlugin.loader,
  	'css-loader',
  	{
  		loader: "postcss-loader",
  		options: {
  			postcssOptions: {
  				plugins: [
  					"postcss-preset-env",
  				],
  			},
  		},
  	},
  ]
  

• 配置package.json，在其中追加browserslist配置，通过配置加载指定的css兼容性样式

    "browserslist": {
        //开发环境
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ],
        //生产环境：默认是生产环境
      "production": [
        ">0.2%",//兼容市面上99.8%的浏览器
        "not dead",//"死去"的浏览器不能兼容，例如IE8
        "not op_mini all",//不做Opera浏览器mini版的兼容
        "ie 10"//兼容IE10
      ]
  

• 备注1：browserlist是一套描述产品目标运行环境的工具，它被广泛用在各种涉及浏览器移动端的兼容性支持工具中，详细配置规则参考：https//github.com/browserslist/browserslist

• 备注2：若出现版本不兼容，或配置不正确的错误，那么需更换依赖包版本

3.js语法检查

• 概述：对js基本语法错误/隐患，进行提前检查

• 安装loader

  • npm install eslint-loader eslint

• 安装检查规则库：

  • npm install eslint-config-airbnb-base eslint-plugin-import

• 备注：eslint-config-airbnb-base定制了一套标准的、常用的js语法检查规则，推荐使用

• 配置loader

  {
      // 对js进行语法检查
      test: /\.js$/,
      exclude: /node_modules/,
      // 优先执行
      enforce: 'pre',
      loader: 'eslint-loader',
      options: {
  			fix: true //若有问题自动修复，重要！！！！
  	}
  },
  

• 修改package.json

    "eslintConfig": {
      "extends": "airbnb-base",
      "env": {
        "browser": true
      }
    }
  

• 备注：若出现：warning Unexpected console statement no-console 警告，意识是不应该在项目中写console.log()，若想忽略，就在要忽略检查代码的上方输入一行注释://eslint-disable-next-line即可.

4.js语法转换

• 概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理

• 安装loader

  • npm install babel-loader @babel/core @babel/preset-env --save -dev

• 配置loader

  {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
            loader: "babel-loader",
            options: {
                 presets: ['@babel/preset-env']
            }
      }
  }
  

5.js兼容性处理

• 安装包

  • npm install @babel/polyfill

• 使用

  app.js
  import  '@babel/polyfill';//包含es6的高级语法的转换
  

6.压缩html、压缩js

• 直接修改webpack.prod.js中的mode为production即可
• 备注：若设置了模式为production报错 ，必须在new HtmlWebpackPlugin时添加配置minify:false

7.压缩css

• 安装插件

  npm install optimize-css-assets-webpack-plugin --save -dev

• 引入插件

  //引入OptimizeCssAssetsPlugin，用于压缩css
  const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  

• 配置插件

  new OptimizeCssAssetsPlugin({
      cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
      },
  })