|
前言：
本文简单配置了webpack的一个插件：html-webpack-plugin;
演示了html-webpack-plugin帮我们做的工作。
正文：
plugin是webpack一个比较重要的概念。
当前webpack.config.js配置：
const path = require('path');
module.exports={
entry :{
path: path.resolve(__dirname,'src/app.js')
},
output:{
path:path.resolve(__dirname,'dist'), //这里必须是绝对路径
filename:'app.hundle.js'
},
mode:'development'
}
现在，我们安装并配置一个插件html-webpack-plugin。
$ npm i -D html-webpack-plugin
plugins 接收的是一个数组，数组的每一项都是一个构造函数的实例。
...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', //生成的新的html文件所依赖的模板
filename: 'index.html' //生成的新的html文件的名字
})
],
...
执行npm run build，打开dist目录下的index.html文件查看源码。
html-webpack-plugin做的工作：
- 自动生成一个index.html文件
- 将webapck打包好的app.js文件动态的引入dist目录下新生成的index.html中。
更多html-webpack-plugin配置详见 ：https://www.npmjs.com/package/html-webpack-plugin
| 
转播
