说明

由于webpack5正式版刚发布不久，仍有插件不支持webpack5，因此此文以webpack4为例进行撰写。

webpack@4.44.1

webpack-cli@3.3.12

提取CSS成单独文件

安装插件

1
yarn add mini-css-extract-plugin -D

配置文件：将MiniCssExtractPlugin.loader替换曾经的style-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * @description:
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2020-12-31 19:32:48
 * @LastEditTime: 2020-12-31 19:32:48
 * @LastEditors: 小康
 */

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css' //对输出的文件进行重命名,默认为main.css
    })
  ],
  mode: 'development'
}

webpack5可能无法使用。

css兼容处理

安装插件

1
yarn add postcss-loader postcss-preset-env -D

插件配置

  1. 在package.json中加入配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    "browserslist": {
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ],
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ]
    }

  2. 编写在webpack.config.js同目录创建文件夹postcss.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /**
     * @description:
     * @author: 小康
     * @url: https://xiaokang.me
     * @Date: 2021-01-01 15:09:48
     * @LastEditTime: 2021-01-01 15:09:48
     * @LastEditors: 小康
     */
    module.exports = {
      plugins: [
        //使用postcss插件
        require('postcss-preset-env')
      ]
    }

  3. 使用postcss-loader

    1
    2
    3
    4
    5
    6
    7
    8
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
        }
      ]
    }

压缩css

安装插件

1
yarn add optimize-css-assets-webpack-plugin -D

接下来在plugin使用即可

1
2
3
4
5
6
7
8
9
10
11
const OptiomizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new MiniCssExtractPlugin({
    filename: 'css/built.css'
  }),
  // 压缩CSS
  new OptiomizeCssAssetsWebpackPlugin()
]

js语法检查

js语法检查使用airbnb。安装插件

1
yarn add eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

  1. 在package.json中配置

    1
    2
    3
    "eslintConfig": {
      "extends": "airbnb-base"
    }

  2. 在webpack.config.js中配置loader

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader',
          options: {
            // 自动修复eslint的错误
            fix: true
          }
        }
      ]
    }

js兼容性处理

使用babel-loader将es6语法转为es5语法。

1
yarn add babel-loader @babel/preset-env @babel/core core-js -D

webpack配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
module: {
  rules: [
    
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: {
                    //core-js的版本
                    version: 3
                  },
                  //需要兼容的浏览器
                  targets: {
                    chrome: '60',
                    firefox: '60',
                    ie: '9',
                    safari: '10',
                    edge: '17'
                  }
                }
              ]
            ]
          }
        }
      ]
    }
    
  ]
}

js与html压缩

  1. 生产环境下会自动压缩js代码。

  2. 压缩html同样使用插件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true
        }
      })
    ]