webpack之html-webpack-plugin简单配置

前言：

本文简单配置了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