使用plugins让打包更便捷

以前运行dist下的js，都是手动把index.html拷贝过去的，每次把dist文件夹删除，都须要将index.html拷贝进去，这样很麻烦，咱们在webpack官方插件中找到 HtmlWebpackPlugin

module.exports = { 　　/** 　　* 打包模式，不配置会警告，但底层仍是会去配置默认的，就是production 　　* production: 压缩模式，被压缩的代码 　　* development: 开发模式，不压缩的代码 　　* 　　*/ 　　mode: 'development', 　　// 这个文件要作打包，从哪个文件开始打包
　　entry: './src/index.js', 　　plugins: [new HtmlWebpackPlugin()], 　　// 打包文件要放到哪里去，就配置在output这个对象里
　　output: { 　　　　// 打包好的文件名字
　　　　filename: 'bundle.js', 　　　　/** 　　　　* 打包出的文件要把他放到哪个文件夹下，path后面要放一个绝对路径 　　　　* __dirname指的是webpack.config.js所在的当前目录的这个路径 　　　　* 下面这个结合就是一个绝对路径 　　　　*/ 　　　　path: path.resolve(__dirname, 'dist') 　　} }

这样配置好，再去打包，发现会自动生成一个index.html，

index.html

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Webpack App</title>
　　</head>
<body>
　　<script type="text/javascript" src="bundle.js"></script></body>
</html>

html里面还引入了bundle.js。并且在src里面我并无这个index.html.这就是webpack里面插件的做用javascript

HtmlWebpackPlugin这个插件能干什么呢？ HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

咱们再打开index.html，发现网页上什么也没有。为何呢？

咱们看本身的代码逻辑

index.js

var root = document.getElementById('root'); import './index.scss'; root.innerHTML = '<div class="iconfont iconfangdajing">abc</div>';

代码逻辑是找到id为root到节点，再把abc挂在到root上。可是咱们看index.html并无root这个标签。因此说明用webpack生成到这个html，少了一个id为root的标签。那我想让他自动生成这个id为root的标签，怎么办，能够对这个html-webpack-plugin作一个配置

plugins: [new HtmlWebpackPlugin({ 　　template: 'src/index.html' })],

而后在src里面本身写一个模版index.html

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>html template</title>
　　</head>
　　<body>
　　　　<div id='root'></div>
　　</body>
</html>

而后运行npm run bundle，打开自动生成的html

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title>html template</title>
　　</head>
　　<body>
　　　　<div id='root'></div>
　　　　<script type="text/javascript" src="bundle.js"></script>
　　</body>
</html>

能够惊讶的看到id为root的标签插入进去了。这是为何呢？css

html-webpack-plugin会自动生成一个html，这个html是以哪一个模版生成的呢，是src下面的index.html为模板生成的。生成以后，会把打包出来bundle.js注入到html中。

经过这个例子，咱们说明一下webpack中plugin的做用。

plugin能够在webpack运行到某个时刻的时候，帮你作一些事情。这个很像生命周期函数的定义。这个时刻是什么时刻呢，就是webpack打包结束的时刻。其它的插件也会在某些时刻作一些事情，好比刚打包的时刻。好比打包js的某个时刻。再举个例子。。

咱们如今打包好的名字叫bundle.js，如今我改一下，叫作dist.js

output: { 　　filename: 'dist.js', 　　path: path.resolve(__dirname, 'dist') }

而后从新打包，而后dist目录下会多出一个dist.js文件，html里面自动引入的也是dist.js文件。可是咱们看bundle.js的文件依然存在，为何呀，一个是咱们刚才没有删除dist，再打包，但每次打包都须要删除一下，会很麻烦。 咱们但愿每次打包的时候，自动将dist删除，这样就不会有上次遗留的东西了。如今就须要另一个插件，在官网webpack下找不到，叫作clean-webpack-plugin

先安装

npm install clean-webpack-plugin -D

装好以后，咱们去增长配置

plugins: [
　　new HtmlWebpackPlugin({ 　　　　template: 'src/index.html' 　　}), new CleanWebpckPlugin()
],

这个意思是在打包以前先删除掉dist这个文件夹。这样运行npm run bundle，以前bundle.js就不在了。