webpack配置-js语法检查、兼容处理、压缩(js和html压缩)

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

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"
  }
}

6.结语

感谢小伙伴们的大力支持,我会继续写出高质量的、、、、、搞笑的文章的。
这篇文章好像没有笑点,怎么办呢。。。。嗯~~
要不先来5毛钱的评论区尬聊??🤭

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读