说明

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

webpack@4.44.1

webpack-cli@3.3.12

提取CSS成单独文件

安装插件

yarn add mini-css-extract-plugin -D

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

/**
 * @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兼容处理

安装插件

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

插件配置

  1. 在package.json中加入配置

    "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

    /**
 * @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

    module: {
  rules: [
    {
      test: /\.css$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
    }
  ]
}

压缩css

安装插件

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

接下来在plugin使用即可

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。安装插件

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

  1. 在package.json中配置

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

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

    module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        // 自动修复eslint的错误
        fix: true
      }
    }
  ]
}

js兼容性处理

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

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

webpack配置

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同样使用插件

    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
    }
  })
]