0.jpg
写在前面
前面的文章中，我们使用loader对不同的文件进行打包，也介绍了一些loader的高级配置和介绍，今天开始，我们将介绍，能让webpack打包更便捷的Plugins，也就是webpack的插件
Plugins
我们知道，在我们通常的项目中，index.html会跟随在我们的出口dist目录中的，在我们当前的目录中，如果我们删掉了dist中的index.html，重新打包后，这个文件并不会自动生成，还得需要我们手动去简历，当然，这是很不合理的，下面我们将通过插件完成这一功能，也是我们今天认识的第一个插件。
HtmlWebpackPlugin
我们参照webpack官网对他进行安装和响应的配置先。
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path')
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader'
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
}
},
'sass-loader',
'postcss-loader'
],
}]
},
+ plugins: [new HtmlWebpackPlugin()],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
}
这个时候我们打包试一下，这时候会发现，在dist目录下生成了一个index.html文件。并把打包后的js引入进去。那么这个插件是干嘛的呢？
HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入这个html文件中
这个时候我们打开这个html发现页面报错了，因为生成的html是没有我们逻辑中需要的root节点的。那么我们怎么才能让生成的html加入这个节点呢，这时候，我们就需要为插件配置一个模板，让他依照一个模板去打包，如下。
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
})],
我们在src下新建一个index.html模板，这时候，htmlwebpackplugin就会依照这个模板进行打包了。打包试试吧
Plugin可以在Webapck运行到某一个时刻的时候，帮你做一些事情
这一点其实是挺像我们在开发vue或者react时候的生命周期函数。
CleanWebpackPlugin
现在大家一起跟我来操作这样的事，我们不要动之前的出口文件目录，把配置中的出口文件改一个名字，然后打包，你会发现dist目录下会新生成一个js文件。而我们之前的bundle.js并没有被删除。这样有时候就会造成一些问题。我们希望的是在打包的时候，先将dist目录删除，然后再执行打包，这就需要我们的CleanWebpackPlugin,我们按照文档先安装，再做出相应的配置。
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin()
],
这个时候再打包就会发现dist目录是先删除后更新的了。
写在后面
通过本节的讲解，我们已经对Plugin有了一点的认识，他是基于Webapck打包事件流的，在打包的某一个节点上对打包内容做一些操作。本节只列举了几个例子，其实webpack的插件非常之多，大家看官网就可以看到，当然还有一些第三方的插件，大家知道Webapck插件的基本用法，以后用到哪些插件，查看相关文档即可，也没必要把所有的API都看一遍。
网友评论