使用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里面插件的作用
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的标签插入进去了。这是为什么呢？
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就不在了。
