本文介绍了webpack中4个插件的使用。

自动清理构建目录

每次webpack构建完之后，都会在输出目录生成构建好的文件。如果没有清理掉之前的构建文件的话，在多次构建之后，这个输出目录无用文件就会很多。而手动清理又比较麻烦。webpack中clean-webpack-plugin可以实现每次构建前，自动删除output指定的目录：
使用前先安装：

1	npm i clean-webpack-plugin -D

// webpack.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exporte = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash:8].js'
    },
    plugins: [
        // ...
        new CleanWebpackPlugin()
    ],
    // ...
}

注意，在clean-webpack-plugin v3的版本中，只能够使用解构的方式引入

自动补齐CSS3前缀

由于浏览器标准没有统一，我们需要去兼容许多问题，比如样式不一样。不同浏览器CSS样式可能需要不同的前缀，如 -webkit、-moz 等等，可以使用 autoprefixer 来自动补全前缀。

autoprefixer 是一个后置处理器，根据的是 Can I Use 这个网站上给出的兼容情况进行补齐前缀。
autoprefixer 一般是与 postcss-loader 一起使用，所以使用前需要先安装两者：

1	npm i postcss-loader autoprefixer -D

安装完毕之后，就可以配置下 webpack.config.js：

// webpack.config.js
const path = require('path')

module.exporte = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash:8].js'
    },
    module: {
        rules: [
             {
                 test: /\.jsx?$/,
                 use: 'babel-loader'
             },
             {
                  test: /\.css$/,
                  use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
              },
              {
                  test: /\.less$/,
                  use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader']
              },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash:8].css'
        })
    ]
    // ...
}

然后增加postcss-loader的配置文件postcss.config.js：

// postcss.config.js
module.exports = {
  plugins: [require('autoprefixer')]
}

此外还需要在package.json或.broswerlistrc中增加autoprefixer要兼容的浏览器版本：

1	browserslist: ["last 2 version", ">1%"]

静态资源内联

静态资源内联，可以减少HTTP请求数；CSS内联也可以避免页面闪动；JS代码内联可以用于上报相关打点，以及完成页面框架的初始化工作。

使用raw-loader达到静态资源内联的目的。

JS/HTML的内联

在 html 页面中需要内联静态资源的地方，使用raw-loader的语法，将静态资源引入就可以：

// html
${require('raw-loader!/path/to/assert.html').default}
// js
${require('raw-loader!babel-loader!/path/to/assert.js').default}

注意：在 raw-loader v0.5.1 中，require 后不需要加 .default

CSS的内联

在 webpack.config.js 的 module 使用 style-loader 插件即可。

px 自动转换为 rem

rem: font-size of root element
-> Rem布局的原理解析

px转换为rem，可以使用 px2rem-loader 插件完成。使用时，需要指定两个参数：remUnit - rem的单位，即 1rem = remUnit px，remPrecesion - 转换成 rem 后保留的小数位数。

// webpack.config.js
const path = require('path')

module.exporte = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash:8].js'
    },
    module: {
        rules: [
             {
                 test: /\.jsx?$/,
                 use: 'babel-loader'
             },
             {
                  test: /\.css$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      'css-loader',
                      'less-loader',
                      'postcss-loader',
                      {
                          loader: 'px2rem-loader',
                          options: {
                              remUnit: 75,
                              remPrecesion: 8
                          }
                      }
                  ]
              },
              {
                  test: /\.less$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      'css-loader',
                      'less-loader',
                      'postcss-loader',
                      {
                          loader: 'px2rem-loader',
                          options: {
                              remUnit: 75,
                              remPrecesion: 8
                          }
                      }
                  ]
              },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash:8].css'
        })
    ]
    // ...
}

此外，为了动态计算根节点的 font-size，可以在CSS中加入：

1
2
3

html: {
    font-size:calc(100vw/固定分辨率)
}

种星星

webpack中的一些常用配置【一】