webpack高级用法（1）：自动清理构建目录、多页面应用打包

1 自动清理构建目录

避免每次构建前需要手动删除dist，使用clean-webpack-plugin，默认会删除 output 指定的输出目录

1.1 插件安装

npm i clean-webpack-plugin -D

1.2 配置

...
const {
   CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
   
   ...,
    plugins: [
        new CleanWebpackPlugin(),
        ...
    ]
}

2 自动补齐CSS3前缀

2.1 插件安装

npm i postcss-loader autoprefixer -D

2.2 配置

#在package.json中加入如下配置
{
   
  ...,
  "browserslist" : [
    "last 2 version",
    ">1%"
  ]
}

//在webpack.config.js中加入如下配置
'use strict';

module.exports = {
   
    ...,
    module: {
   
        rules: [
            ...,
            {
   test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', {