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

      }
   })   
]