返回

webpack中打包html的方法

Created By ZOU on Sep 27 2019

写一个前端项目肯定得有对应的页面,那webpack怎么配置对应的页面呢,这里借助到html-webpack-plugin。

首先安装对应依赖:

cnpm i -D html-webpack-plugin

html-webpack-plugin:webpack的插件,用于打包创建html文件

配置webpack

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
//...其他配置
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', // 打包后生成的文件名,
template: path.resolve(__dirname, './index.html'); // 模版
})
]
}

然后在更目录创建一个index.html的模版文件。

打包效果:

打包后的html页面:

标签: html webpack