1. js 检查 Eslint
2. webpack 兼容处理 eslint
3. webpack 压缩 html 和 JS
4. 生产环境配置

---

1. JS 检查 Eslint

安装依赖

yarn add eslint eslint-config-airbnb-base eslint-plugin-import eslint-webpack-plugin -D

配置 package.json

"eslintConfig":{
    "extends":"airbnb-base"
}

配置 webpack.config.js

const EslintPlugin = require("eslint-webpack-plugin")
plugins:[
    new EslintPlugin({
        fix:true // 自动修复不合理的写法
    })
]

---

2. webpack 兼容处理 js

方式一：全部兼容（缺点：会将所有兼容代码引入，会增大文件体积）

安装依赖

yarn add babel-loader @babel/core @babel/preset-env @babel/polyfill -D

在 webpack.config.js 中配置

module:{
    rules:[
        {test:/\.js$/,loader:"@babel/polyfill"}
    ]
}

方式二：按需加载（推荐）

安装依赖

yarn add babel-loader @babel/core @babel/preset-env core-js

在 webpack.config.js 中配置

module:{
    rules:[
        {
            test:/\.js$/,
            exclude:/node_modules/
            loader:"babel-loader",
            options:{
                presets:[
                    [
                        "@babel/preset-env",
                        {
                            useBuiltIns:"usage",
                            coresjs:{
                                version:3
                            },
                            targets:{ // 指定兼容到哪个版本的浏览器
                                chrome:"60",
                                ie:"9"
                            }
                        }
                    ]
                ]
            }
        }
    ]
    
}

---

3.webpack 压缩 html 和 js

在webpack.config.js 中 mode:’production’ 模式， 会默认进行 JS 的打包压缩，

下面示例压缩html

plugins:[
    new HtmlWebpackPlugin({
        template:"./src/index.html",
        collapseWhitespace：true, // 移除空格
        removeComments:true, //移除注释
    })
]

---

4. css 兼容处理

安装依赖

yarn add postcss-loader postcss-preset-env -D

配置 package.json

"browsersList":{
    "development":[
        "lase 1 chrome version",
        "lase 1 firefox version",
        "lase 1 safari version"
    ],
    "production":[
        ">0.2%",
        "not dead",
        "not op_mini all"
    ]
}

配置 webpack.config.js

module:{
    rules:[
        {test:/\.css$/,use:["style-loader","css-loader","postcss-loader"]}
    ]
}
plugins:[
    require("postcss-preset-env")
]

---

5. webpack 搭建开发生产环境

package.json

 "eslintConfig": {
    "extends": "airbnb-base"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const {resolve} = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
const ESLintPlugin = require("eslint-webpack-plugin")
const cssLoader = [
  // "style-loader",
  MiniCssExtractPlugin.loader,
  {
    loader:"css-loader",
    options:{
      esModule:false
    },
  },
  "postcss-loader"
​
]
module.exports = {
  entry:"./src/js/index.js",
  output:{
    filename:"js/index.js",
    path:resolve(__dirname,"dist")
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[...cssLoader]
      },
      {
        test:/\.less$/,
        use:[...cssLoader,"less-loader"]
      },
      {
        test:/\.scss$/,
        use:[...cssLoader,"sass-loader"]
      },
      {
        test:/\.(png|jpg)$/,
        loader:"url-loader",
        options:{
          limit:10*1024,
          esModule:false,
          outputPath:"img"
        }
      },
      {
        test:/\.html$/,
        loader:'html-withimg-loader'
      },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:"babel-loader",
        options:{
          presets:[
            [
              "@babel/preset-env",
              {
                useBuiltIns:'usage',
                corejs:{
                  version:3
                },
                targets:{
                  chrome:"60",
                  ie:"9"
                }
              }
            ]
          ]
        }
      },
      {
        exclude:/\.(png|jpg|html|js|css|less|scss)$/,
        loader:'file-loader',
        options:{
          outputPath:'media'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./src/index.html",
      collapseWhitespace:true,
      removeComments:true
      
    }),
    new MiniCssExtractPlugin({
      filename:"css/index.css"
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new ESLintPlugin({
      fix:true
    }),
    require("postcss-preset-env")
  ],
  mode:"production",
  devServer:{
    static:resolve(__dirname,"dist"),
    open:true,
    compress:true,
    port:3000
  }
}