webpack5小结-4

js 语法规范检查

由于项目可能是团队开发,代码风格各异,所以需要引入 eslint 来规范

1. 首先下载 npm i eslint-loader eslint -D

2. 我们这里使用的是airbnb,所以还需要下载npm i eslint-config-airbnb-base eslint-plugin-import -D

3. 下载完之后要先在package.json中进行配置使用

   {
     "name": "webpack-wrapper",
     "version": "1.0.0",
     "description": "",
     "main": "webpack.config.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "css-loader": "^5.0.0",
       "eslint": "^7.12.1",
       "eslint-config-airbnb-base": "^14.2.0",
       "eslint-loader": "^4.0.2",
       "eslint-plugin-import": "^2.22.1",
       "html-webpack-plugin": "^4.5.0",
       "style-loader": "^2.0.0",
       "webpack": "^5.2.0",
       "webpack-cli": "^4.1.0"
     },
     "eslintConfig": {
       "extends": "airbnb-base"
     }
   }

4. 最后在webpack.config.js中引入即可

   const { resolve } = require('path')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'main.js',
       path: resolve(__dirname, 'build'),
     },
     mode: 'development',
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
         },
         //注意：只检查自己写的源代码,第三方的库是不用检查的
         {
           test: /\.js$/,
           exclude: /node_modulse/, //不检测依赖中的js
           loader: 'eslint-loader',
           options: {
             fix: true,
           },
         },
       ],
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html',
       }),
     ],
   }

---

js 语法兼容处理

由于@babel/polyfill的过时和webpack5的到来,这里我们根据webpack5来进行 js 的兼容配置

1. 下载所需要的所有依赖npm i babel-loader @babel/core @babel/preset-env core-js -D

2. 在根目录下新建.babelrc文件来配置babel项

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "usage",
           //usage-会根据你配置(browserslist)的浏览器兼容,来实现按需添加
           "corejs": 3 //这里是对corejs的版本引用的告知
         }
       ]
     ],
     "plugins": []
   }

3. 在package.json中新增browserslist配置项

   {
     "name": "222",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "@babel/core": "^7.12.3",
       "@babel/preset-env": "^7.12.1",
       "babel-loader": "^8.1.0",
       "core-js": "^3.6.5",
       "html-webpack-plugin": "^4.5.0",
       "webpack": "^5.3.0",
       "webpack-cli": "^4.1.0"
     },
     "browserslist": {
       "development": ["last 3 version", "> 1%", "not ie <= 8"],
       "production": [">0.2%", "not dead", "not op_mini all"]
     }
   }

4. 在webpack.config.js中进行配置引用

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const { resolve } = require('path')
   process.env.NODE_ENV = 'development'
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'main.js',
       path: resolve(__dirname, 'build'),
     },
     mode: 'development',
     module: {
       rules: [{ test: /\.js$/, use: 'babel-loader' }],
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html',
       }),
     ],
   }

---

js 和 html 文件的压缩处理

在webpack5中只需要把mode-->production,改为生产模式后,打包后会自动压缩html和js的代码
在旧版 webpack 中,需要修改HtmlWebpackPlugin的配置项来压缩 html 代码

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: resolve(__dirname, 'build'),
  },
  mode: 'development', //在生产模式(production)下会自动压缩代码
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true, //移除空格
      },
    }),
  ],
}

---