Webpack的另一个核心是Plugin,官方有这样一段对Plugin的描述:
While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
上面表达的含义翻译过来就是:
前面演示的过程中,每次修改了一些配置,重新打包时,都需要手动删除dist文件夹,可以借助于一个插件来帮助完成,这个插件就是CleanWebpackPlugin;
首先,先安装这个插件:
npm install clean-webpack-plugin -D
之后在webpack.config.js中配置:
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
//其余代码省略
plugins: [
new CleanWebpackPlugin()
]
}
还有一个不太规范的地方:
对HTML进行打包处理可以使用另外一个插件:HtmlWebpackPlugin;
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
}
生成index.html分析
现在自动在dist文件夹中,生成了一个index.html的文件, 该文件中也自动添加了打包的bundle.js文件;
文件是如何生成的?
生成的index.html内容是默认的模板,也可以生成自己想要的模板
自定义HTML模板
如果想在自己的模块中加入一些比较特别的内容:
;这个需要一个属于自己的index.html模块,比如说下面这个模板
DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
noscript>
<div id="app">div>
body>
html>
自定义模板数据填充
上面的代码中,会有一些类似这样的语法<% 变量 %>,这个是EJS模块填充数据的方式。
在配置HtmlWebpackPlugin时,可以添加如下配置:
template
:指定要使用的模块所在的路径;title
:在进行htmlWebpackPlugin.options.title读取时,就会读到该信息;const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: "项目名称",
template: "./index.html"
})
]
}
但是,这个时候编译还是会报错,因为自定义的模块中还使用到一个BASE_URL的常量。报错如下
ERROR in Template execution failed: ReferenceError:BASE_URL is not defined
ERROR in ReferenceError: BASE_URL is not defined
这是因为在编译template模块时,有一个BASE_URL:>,但是并没有设置过这个常量值,所以会出现没有定义的错误;
这个时候可以使用DefinePlugin插件;
DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安装):
const { DefinePlugin } = require("webpack")
module.exports = {
plugins: [
new DefinePlugin({
BASE_URL: "'./'",
coder: "'xxx'", //当成一个全局变量,根据实际情况决定是否添加
counter: "123" //当成一个全局变量
})
]
}
这个时候,编译template就可以正确的编译了,会读取到BASE_URL的值;
Mode配置选项,可以告知webpack使用相应模式的内置优化:
这几个选项的区别?