webpack配置-js语法检查、兼容处理、压缩（js和html压缩）_webpack 对原生html jquery混淆,不会替换到原有的script-CSDN博客

本文链接：https://blog.csdn.net/wei1273356078/article/details/106295270

在项目上线之前，是必须要对代码进行一系列处理的，这样性能才会提高

1.介绍安装的包

以下是js语法检查需要的包

如果对airbnb感兴趣的小伙伴，可以点击这里，是个中文的呦
https://github.com/sivan/javascript-style-guide

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

以下是js兼容处理需要的包

这几个包很重要，主要功能：就是将ES6及更高的语法编译为ES5语法，为了能够兼容大多数浏览器。
这里我就只演示最优结果（按需加载）。想要了解基本处理js兼容和全部js兼容处理可以看文章的结尾部分，有完整的代码+详细是注释。

babel-loader
@babel/core
core-js

js压缩与html压缩

js压缩不需要安装对应的包，很简单的，所以我就把html压缩放在这里和js压缩一块说，这两个都是很简单的。

2.js语法检查

根据 airbnb 语法标准格式写代码。

1.loader配置

        test: /\.js$/,
        // 一定要排除第三方的库
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          // 对自己写的语法格式比较自信，可以注释掉
          fix: true
        }

2.package.json配置

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

3.配置完成之后，可以测试一下自己写的代码了，如果fix注释掉了，你可能会被报错弄的怀疑人生🤭

3.js兼容处理

1.loader配置

        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做兼容处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3,
                },
                // 指定兼容浏览器版本范围
                targets: {
                  chrome: '70', // 谷歌版本70及以上
                  firefox: '62',
                  ie: '9',
                  safari: '10',
                  edge: '17',
                }
              }
            ]
          ]
        }

4.js、html压缩

1.js压缩

  // js压缩，直接把开发模式改为生产模式就可以了
  // 原因：生产模式下webpack会自动加载UglifyJsPlugin插件
  mode: 'production'

2.html压缩：就是在html-webpack-plugin插件中配置，前面的文章有写。

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

5.代码展示

webpack.config.js配置文件代码展示

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'bundle'),
  },
  module: {
    rules: [
      // js语法检查
      {
        test: /\.js$/,
        // 一定要排除第三方的库
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      },
      {
        /*
          js兼容处理：babel-loader  @babel/core
            1.js的基本兼容处理  -->  @babel/preset-env
              问题：只会转换基本的语法，而不转换新的API，比如Promise、Set、Maps、Proxy、Reflect、Symbol等全局对象
            2.全部js兼容处理  -->  @babel/polyfill
              问题：会将所有兼容性代码全部引入，使得打包之后的js文件体积变大，性能降低
            3.按需加载  -->  core-js
        */
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做兼容处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3,
                },
                // 指定兼容浏览器版本范围
                targets: {
                  chrome: '70', // 谷歌版本70及以上
                  firefox: '62',
                  ie: '9',
                  safari: '10',
                  edge: '17',
                }
              }
            ]
          ]
        }
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    }),
  ],
  // js压缩，直接把开发模式改为生产模式就可以了
  // 原因：生产模式下webpack会自动加载UglifyJsPlugin插件
  mode: 'production'
}

package.json配置文件代码展示

{
  "name": "webpack_config",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "css-loader": "^3.5.3",
    "eslint": "^7.0.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.20.2",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.1",
    "less-loader": "^6.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}