webpack笔记：

1、分离less到独立的css

使用less之前还需要安装less插件
npm i less --save-dev
npm i extract-text-webpack-plugin --save-dev

修改在配置文件webpack.config

    const webpack = require('webpack')
    const path = require('path')
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    module.exports = {
        entry: path.join(__dirname, "src/index.js"),
        output: {
            path: path.join(__dirname, "/dist"),
            filename: "bundle.[name].js"
        },
        module: {
            rules: [{
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            }]
        },
        plugins: [
            new ExtractTextPlugin('/css/style.css')
        ]
    }

常用的webpack组件

html-webpack-plugin

// 这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
plugins:[
	new HtmlWebpackPlugin({
         // new 一个这个插件的实例，并传入相关的参数
         template: __dirname + '/src/index.html'
     })
]

copy-webpack-plugin

// 将单个文件或整个目录复制到构建目录
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins:[
	new CopyWebpackPlugin([{
	      from: path.resolve(__dirname, 'static'),
	      to: 'static',
	      ignore: ['.*']
   }])
]

webpack-bundle-analyzer

// 可视化分析报告
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins:[
	new BundleAnalyzerPlugin()
]

clean-webpack-plugin

const CleanWebpackPlugin = require('clean-webpack-plugin'); // 打包前清除目标目录
plugins:[
	new CleanWebpackPlugin(['dist'])
]

extract-text-webpack-plugin
适用于webpack3.x，或者webpack4.x版本对应的beta版本，且这个beta版本不支持生成hash）
webpack4.x版本中使用mini-css-extract-plugin

// 将使用到的css文件打包至指定文件下，并压缩
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
 module: {
     rules: [{
        test: /\.css$/,
        use: ExtractTextWebpackPlugin.extract({
              fallback: 'style-loader',
              use: [{
                  loader: 'css-loader',
                  options: {
                      modules: true, // 指定启用css modules
                      localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                  }
              }]
          })},
      	{
          test: /\.less$/,
          use: ExtractTextWebpackPlugin.extract({
              fallback: 'style-loader',
              use: [{
                  loader: 'css-loader',
                  options: {
                      modules: true, // 指定启用css modules
                      localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                  }
              }, {
                  loader: 'less-loader',
                  options: {
                      modules: true, // 指定启用css modules
                      localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式 ，只针对最外层的选择器
                  }
              }]
          })
      }]},
plugins: [
	new ExtractTextWebpackPlugin({
        filename: 'css/[name].[hash].css',
        allChunks: true     // 会引起报错
    })// 指定css文件路径，并在index.html中插入引入css的地址

mini-css-extract-plugin

将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules: [
    {
         test: /\.css$/,
         use: [
             devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
             'css-loader',
             'postcss-loader'
         ]
     }, {
         test: /\.less$/,
         use: [
             devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
             'css-loader?modules',
             'postcss-loader',
             'less-loader',
         ]
    }
]

uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 压缩js
plugins: [
	new UglifyJsPlugin({
       	uglifyOptions: {
               compress: {
                   warnings: false
               }
           },
           sourceMap: false,
           parallel: false
    })
]

compression-webpack-plugin

// 提供带 Content-Encoding 编码的压缩版的资源
const CompressionWebpackPlugin = require('compression-webpack-plugin');  
plugins: [
new CompressionWebpackPlugin({
     asset: '[path].gz[query]',
     algorithm: 'gzip',
     test: new RegExp(
          '\\.(' +
         ['js', 'css'].join('|') +
          ')$'),
     threshold: 10240,
     minRatio: 0.8
})

purifycss-webpack

const PurifycssWebpack = require('purifycss-webpack'); // 消除冗余的css，一个不剩，哎
plugins: [
	new PurifycssWebpack({
	    paths: glob.sync(path.resolve('src/*.html'))// 匹配所有的src下的html文件，删除多余的样式
    })
]