04

目标：

能将项目中css提取到单独的文件中能使用配置自动导入打包资源到html中能使用clean-webpack-plugin清空打包目录能做css代码和js代码压缩优化

plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建相关关的事情。 plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

使用plugin的难点在于plugin本身的配置项，而不是如何在webpack中引入plugin，几乎所有webpack无法直接实现的功能，都能找到开源的plugin去解决，我们要做的就是去找更据自己的需要找出相应的plugin。

mini-css-extract-plugin

功能：这个插件帮助我们把css代码提取到一个独立的文件中（而不是以style的方式嵌在html文件中）。

npm官网：https://www.npmjs.com/package/mini-css-extract-plugin

使用：

下载安装配置webpack.config.js运行webpack打包，检查效果

下载安装

它是一个开发依赖。

npm install mini-css-extract-plugin -D -------------------------------------- + mini-css-extract-plugin@0.9.0 added 7 packages from 3 contributors in 10.363s

配置

在webpack.config.js中，修改三个地方：

引入插件在less的loader列表中加入loader在plugins中添加 mini-css-extract-plugin

如下：

// node 中的核心模块 const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { // { test: /\.less$/, // 如果这个模块以less结尾 // 如果在打包的过程遇到了.less，则：从右向左 // 1. 先用less-loader 读出内容，转成css // 2. 用css-loader 读出内容 // 3. 用postcss-loader 配合autoprefixer这个工具给需要前缀的样式添加前缀 // 4. style-loader把读出的内容以style标签的格式 // 附加在.html文件上 // use: ['style-loader','css-loader', 'postcss-loader', 'less-loader'] // 设置要处理的loader use: [ { loader: MiniCssExtractPlugin.loader, options:{publicPath: '../'} }, 'css-loader', 'postcss-loader', 'less-loader' ] // 设置要处理的loader }, // ... plugins:[ new MiniCssExtractPlugin({ filename:'css/[name].css' }) ] }

打包尝试一下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xYVXnHD4-1603365788047)(asset/image-20200924154616506.png)]

由于，此时把css单独放在一个文件中，所以在index.html如果要引入样式还需要手动去添加对css的引用。

html-webpack-plugin

功能：把我们自已写的.html文件复制到指定打包出口目录下，并自动引入相关的资源代码。

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。可以生成创建html入口文件。

官网：https://www.npmjs.com/package/html-webpack-plugin

实现步骤：

下载安装

npm i html-webpack-plugin -D ------------------------------------ + html-webpack-plugin@4.3.0 added 63 packages from 130 contributors in 42.462s

配置

在webpack.config.js中，做两件事：

引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); 添加一个plugins配置 // node 中的核心模块 const path = require('path') // console.log( path.resolve('./src/index.html') ) const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins:[ new MiniCssExtractPlugin({ filename:'css/[name].css' }), new HtmlWebpackPlugin({ minify: { // 压缩HTML文件 removeComments: true, // 移除HTML中的注释 collapseWhitespace: true, // 删除空白符与换行符 minifyCSS: true// 压缩内联css }, filename: 'index.html', // path.resolve()就是转成绝对路径 template: path.resolve('./src/index.html') // 指定模块的位置 }) ] }

打包测试

它会把template中指定的.html文件复制（压缩）到出口文件夹还会自动附上打包之后.css和 .js代码

示意图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgOFj9v3-1603365788052)(asset/image-20201022152503142.png)]

clean-webpack-plugin

在生成打包文件之前，把出口目录清空掉。

安装

npm i clean-webpack-plugin -D

修改配置文件

引入：

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

添加plugins

plugins:[ new CleanWebpackPlugin()， 其它... ]

再次打包时，它会帮我们先删除出口文件夹，如果提示没有权限：

Error: EPERM: operation not permitted, lstat 'D:\webpack-learn\02-code\webpack-dev-111\build\css\main.css' at Object.lstatSync (fs.js:1033:3)

则可以试一下：

在vscode的终端中去运行打包命令苹果本：sudo npx webpackwindow: 在打开powershell时，[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5exExy3m-1603365788055)(asset/image-20201022154652946.png)]

代码压缩优化

打包方式记得设置成生产模式:mode: 'production'

对css进行压缩

npm i -D optimize-css-assets-webpack-plugin

去掉js代码中的console.log

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') const TerserWebpackPlugin = require('terser-webpack-plugin') module.exports = { // ... + optimization: { minimizer: [ new OptimizeCssAssetsWebpackPlugin(), new TerserWebpackPlugin({ parallel: 4, extractComments: true, terserOptions: { compress: { warnings: false, drop_console: true, drop_debugger: true } } }) ] }, }

小结

plugin用来增加webpack能力。

步骤：

下载安装配置webpack.config.js 引入 ompress: { warnings: false, drop_console: true, drop_debugger: true } } }) ] },

}

## 小结 plugin用来增加webpack能力。 步骤： 1. 下载安装 2. 配置webpack.config.js 1. 引入 2. 添加plugins的设置