webpack
目标：
- 能将项目中css提取到单独的文件中
- 能使用配置自动导入打包资源到html中
- 能使用clean-webpack-plugin清空打包目录
- 能做css代码和js代码压缩优化
plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建相关关的事情。
例如：
- 抽取css到独立的文件
- 清空打包目录
- 把index.html自动复制到目标文件夹
- …
plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。
使用plugin的难点在于plugin本身的配置项，而不是如何在webpack中引入plugin，几乎所有webpack无法直接实现的功能，都能找到开源的plugin去解决，我们要做的就是去找更据自己的需要找出相应的plugin。
格式：
module.exports = {
entry:
output:,
module:,
plugins:[] // 设置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
--------------------------------------
+ [email protected]
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'
})
]
}
打包尝试一下。
由于，此时把css单独放在一个文件中，所以在index.html如果要引入样式还需要手动去添加对css的引用。
html-webpack-plugin
问题：
需要手动去引入css，需要手动去把index.html从源文件夹复制到目标文件夹…
都可以用html-webpack-plugin来解决。
功能：把我们自已写的.html文件复制到指定打包出口目录下，并自动引入相关的资源代码。
为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。可以生成创建html入口文件。
官网：https://www.npmjs.com/package/html-webpack-plugin
实现步骤：
下载安装
npm i html-webpack-plugin -D
------------------------------------
+ [email protected]
added 63 packages from 130 contributors in 42.462s
配置
在webpack.config.js中，做两件事：
- 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
- 将src下的index.html移动到pulbic/index.html
- 添加一个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('./public/index.html') // 指定模块的位置
})
]
}
-
打包测试
- 它会把template中指定的.html文件复制（压缩）到出口文件夹
- 还会自动附上打包之后.css和 .js代码
示意图：
clean-webpack-plugin
在生成打包文件之前，把出口目录清空掉。
安装
npm i clean-webpack-plugin -D
修改配置文件webpack.config.js
-
引入：
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 webpack - window: 在打开powershell时，
代码压缩优化
打包方式记得设置成生产模式:mode: 'production'
-
对css进行压缩
- 安装插件
npm i -D optimize-css-assets-webpack-plugin-
配置plugins
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') module.exports= { optimization: { minimizer: [ new OptimizeCssAssetsWebpackPlugin() ] } }
-
去掉js代码中的console.log
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
- 引入
- 添加plugins的设置
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！