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都看一遍。