前一章中我们简单的了解了webpack中的入口与输出,知道了webpack是从什么地方开始处理资源,最后又是将资源输出到了什么地方,但是我们并没有真的实现一些功能。下面我们还是在原有例子的基础上继续我们的实现来了解webpack的插件(plugins)机制。 其实webpack自身的功能并不强大,他所完成的多数功能都是通过插件(plugins)以及后面将要介绍的loader来完成的。 插件是webpack的主要甚至是支柱功能,他的目的就是为了解决loader无法实现的功能。webpack有丰富的内置插件和外部插件,并且允许用户自定义插件。 插件的使用一般分为安装、引入、实例化三个步骤。 废话不多说,看看我们要做些什么吧! 一、清除dist目录中的内容(clean-webpack-plugin插件) 前面我们通过ngx webpack命令处理js的时候,我们发现dist目录中会有一些历史遗留,按理来说src目录是我们的开发目录,dist目录是我们需要发布的目录,是干干净净没有任何多余内容的目录,但是我们每次在使用命令前手动删除dist目录中的内容太麻烦了,能不能让webpack在输出前先将dist里的内容清除了,然后在输出新的东西?这样我们就不需要干预dist目录,毕竟我们使用的是webpack这个自动化的资源打包工具。这就用到了clean-webpack-plugin插件。 这个插件是外部插件,webpack自身没有清除目录内容的功能,所以先要安装这个插件,使用如下命令: 安装成功后,配置webpack.config.js文件,引入这个插件然后实例化(使用或者配置)这个插件,引入和实例化的结果如下图: 这里需要注意下代码中的注释部分,由于写这篇文章之前所我所使用的clean-webpack-plugin插件是2.0版本,这还没几个月呢就已经到3.0了,所以在声明的时候有变化,注释掉的是以前的写法,我们安装的clean-webpack-plugin是3.0的,所以引入写法有些变化。 代码中plugins项中就是添加插件的地方,实例化的那个函数名称就是const定义的常量名称,这也是需要注意的。 实例化的时候我们没有填写任何参数,所以默认删除的是dist目录下的内容。(本来是想添加一些参数的,但是发觉clean-webpack-plugin 3.0变化有点大,就没扩展,想了解的朋友可以自己查看下文档) 然后运行命令 ngx webpack,dist目录中的内容又重新生成,并且原来的遗留文件都已经没有了。 二、html文件与js文件相关联(html-webpack-plugin插件) 我们项目中的html还没有使用,同时html中也没有引入js,现在的目的就是要将html也要打包到dist并且html也要引入对应的js。这时我们就用到了html-webpack-plugin 插件。 安装: 修改webpack.config.js,引入html-webpack-plugin并且实例化: 我们有两个html文件所以实例化了两个html-webpack-plugin,template是模板路径,filename是定义输出文件的名称,chunks是定义包含的脚本是什么,hash定义为true是让html添加js链接的时候添加后缀(类似index.js?12323456),防止发布的时候有缓存。 这里需要说明一点的是如果不想让html页面引入脚本的话,chunks要写成这样chunks:[""],如果chunks这一项都没有的话,默认所有js都会添加的这个页面上。 好了运行命令ngx webpack,我们发现html,js文件都打包到了dist目录,并且html中自动添加了对应的js。 假如说我有公共的common.js文件的话,也可以这样写: 我们注意到我们所自动添加的js是自动添加到了body中,我们如何让webpack将js放入head中呢?其实是有方法的,只要在实例化html-webpack-plugin的时候添加一个inject:head或者injecy:false就行了。 三、总结 其实这两个插件还有很多的配置参数,我们只是通过最简单的方法了解了什么是插件,在webpack中如何使用插件,每一个插件的详细使用方法其实都可以单独写一篇文章了。 下一篇文章我们将处理样式相关的资源文件,这样就牵扯到webpack的loader了,下一篇见!cnpm install clean-webpack-plugin --save-dev
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry:{
"index":"./src/index.js",
"login":"./src/login.js"
},
output:{
filename:"[name].js"
},
plugins:[
new CleanWebpackPlugin()
]
}
cnpm install html-webpack-plugin --save-dev
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
"index":"./src/index.js",
"login":"./src/login.js"
},
output:{
filename:"[name].js"
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['index'],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:['login'],
hash:true
})
]
}
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
"common":"./src/common.js",
"index":"./src/index.js",
"login":"./src/login.js"
},
output:{
filename:"[name].js"
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:["common","index"],
hash:true
}),
new HtmlWebpackPlugin({
template:'./src/login.html',
filename:'login.html',
chunks:["common","login"],
hash:true
})
]
}