webpack 之(11) js 语法检查,兼容处理,压缩html和js

语法检查

   1/需要在pageage.json中配置eslintConfig

   2/需要执行一下命令:

   npm i eslint-loader  eslint  eslint-config-airbnb-base  eslint-plugin-import

  3/   // eslint-disable-next-line        包含//内容的这一句,表示下一行eslint所有规则都失效 

"dependencies": {
    "css-loader": "^5.2.4",
    "eslint": "^7.25.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1"
  },
//继承airbnb的规范
"eslintConfig": {
    "extends":"airbnb-base"
  }

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      /* 语法检查:eslint-loader eslint
        注意:只检查自己写的源代码,第三方的库不用检查的
        设置检查规则
          package.json 中 eslintConfig中设置
          airbnb 风格指南 需要三个库
             --eslint-config-airbnb-base
             --eslint
             --eslint-plugin-import
        package.json配置
        "eslintConfig": {
            "extends":"airbnb-base"
          }
      */
      {
        test: /.js$/,            //对js文件进行语法检查
        exclude: /node_modules/, //忽略第三方的库
        loader: 'eslint-loader',
        options: {
          // 自动修复
          fix: true,
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

js兼容性

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules:[
      /* 
        js兼容性处理:babel-loader  @babel/core  @babel/preset-env
          1/基本js兼容性处理 -->@babel/preset-env
            问题:只能转换基本语法,如promise不能转换

          2/全部js兼容性处理  -->@babel/polyfill
             只需要在index.js 引入,  第一行添加代码  import '@babel/polyfill'
            问题:我只要解决部分兼容性问题,但是要将所有兼容性代码全部引入,体积太大了
          3.需要做兼容性处理的就做:按需加载 -- core-js   执行一下 npm i core-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'
              }
            }
          ]
        ]
       }
     }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

html压缩和js压缩

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

在webpack.config.js中mode设置为 生产环境

 mode:'production'

html需要配置,需要在new HtmlWebpackPlug()中配置

plgins:[
   new HtmlWebpackPlugin({
       template:'./src/index.html',
       minify:{
         //移除空格
         collapseWhitespace:true
         //移除注释
         removeComments:true

      }
   })   
]