一.前言
之前"webpack介绍"一篇中提到webpack的四个核心概念:
entry-入口,output-出口,loader-加载器,plugins-插件
前面几几篇已经用到了entry, output, loader,这一篇使用plugins-插件
二,Webpack插件
webpack官方插件列表-包含插件的安装和基本用法:
https://webpack.docschina.org/plugins/
三,Webpack插件的安装和使用
在之前的几篇介绍中,在dist目录创建的index.js中引入的bundle.js路径会根据各种情况而修改
在devServser下使用:
<script type="text/javascript" src="bundle.js"></script>
在设置了output.publicPath:: 'js/'的情况下,会强制去此路径下寻找资源:
<script type="text/javascript" src="js/bundle.js"></script>
webpack提供了一个可以动态生成html文件的插件:html-webpack-plugin
html-webpack-plugin可以为生成的html页面自动添加静态资源引用的script标签
还有常用插件:clean-webpack-plugin,webpack打包输出前删除指定目录代码
以html-webpack-plugin和clean-webpack-plugin为例:
html-webpack-plugin用于自动生成html
安装html-webpack-plugin和clean-webpack-plugin
npm install html-webpack-plugin clean-webpack-plugin --save-dev
安装完安成后查看package.json:
{
"name": "webpack_test",
"version": "1.0.0",
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
修改webpack.config.js配置文件,添加对插件的使用配置
const path = require('path');
// 自动生成html的插件-根据模板页面生成新的页面
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除之前打包的文件
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/js/entry.js',
output: {
filename: 'bundle.js',
//publicPath: 'js/',
path: path.resolve(__dirname, 'dist/js/')
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
devServer: {
contentBase: 'dist/'
},
plugins: [
// 使用模板./index.html根据当前的index.html页面生成新的页面
new HtmlWebpackPlugin({template: './index.html'}),
// 需要使用插件清除的文件名,当执行webpack命令时会先将指定目录下的文件删除
new CleanWebpackPlugin(['dist']),
]
};
四,测试html-webpack-plugin插件
由于html-webpack-plugin可以自动为我们生成html页面,所以我们将写死的js引用删除
将原dist/index.html页面放入项目根目录,作为模板页面供html-webpack-plugin使用:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
删除之前dist目录下的输出文件,工程目录如下:
重新执行webpack命令打包输出:
index.html内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
html-webpack-plugin插件按照配置,使用根目录下index.html为模板生成页面
放入output.path配置的输出目录'dist/js/'下
新生成的dist/index.html中自动添加了引用bundle.js的script标签
index.html和静态资源在同一目录下,所以不存在引用路径找不到的问题
所以可以将output.publicPath: 'js/'配置项注释掉
五,测试clean-webpack-plugin插件
为了测试clean-webpack-plugin插件清除指定目录下的全部文件
在上边生成好的dist目录下创建一个aaa.js,这是一个webpack不会生成的文件
如果重新执行webpack命令打包输出后,dist目录中不再包含此文件,
说明在输出前,clean-webpack-plugin插件为我们清除了该目录
如上操作,新输出的dist目录下没有aaa.js文件
六,结尾
本篇介绍了webpack插件的安装和使用
在webpack的世界里,一切皆为模块,
webpack只能处理js和json类型的文件(模块),不能直接处理css,图片的文件
对于css和图片的处理要借助于loader转换器,将其转换为webpack可以处理的模块
对于loader不能处理的资源,可以使用plugins插件来处理,
webpack社区提供了多种多样的插件供我们使用,我们也可以自己定义插件
webpack的介绍暂时到这里,接下来会更新关于Vue.js的知识
后续结合Vue.js项目,将会介绍webpack的优化及自定义插件等
示例代码下载: