js语法检查eslint

语法检查： eslint-loader eslint
注意：只检查自己写的源代码，第三方的库不用检查
设置检查规则：
package.json 中 eslintConfig 中配置~
"eslintConfig": {
"extends": "airbnb-base"
}
airbnb 规则指南--> eslint-config-airbnb-base, eslint-plugin-import, eslint 三个库
安装：npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

{
    test: /\.js$/,
    exclude: /node_moudles/, // 排除，防止eslint检测
    loader: 'eslint-loader',
       options: {
           // 自动修复
           fix: true
       }
}

js 的兼容性处理

工具：babel-loader @babel/core @babel/preset-env
1. 基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如 promise 高级语法不能转换
2. 全部的 js 兼容性处理 --> @babel/polyfill （不考虑）
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> corejs npm i core-js -D
结合1 和3 完成js的兼容性处理

 {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
           // 预设: 指示 babel 做怎样的兼容处理
           // presets: ['@babel/preset-env']
           presets: [
               [ 
                  '@babel/preset-env',
                  {
                     // 按需加载
                     useBuiltIns: 'usage',
                     // 指定 core-js 版本
                     corejs: {
                       version: 3
                     },
                    // 指定兼容性做到哪个版本的浏览器
                    targets: {
                       chrome: '60',
                       firefox: '60',
                       ie: '9',
                       safari: '10',
                       edge: '17'
                    }
              ]
          ]
    }
},

注：正常来讲，一个文件只能被一个loader处理
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
先执行eslint 在执行babel
enforce： ‘pre’ 优先执行

js压缩

生产环境下会自动压缩js代码

mode: 'production'

html 压缩

new HtmlWebpackPlugin({
            template: './src/index.html',
            // 压缩html
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
}),