接上一篇：webpack中html-webpack-plugin的使用及配置生成html

本文主要是介绍接上一篇：webpack中html-webpack-plugin的使用及配置生成html，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 安装html-webpack-plugin：

cnpm i html-webpack-plugin@2.24.1 -D

2. webpack.dev.config.js中配置：

var path = require('path');
// 引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: {"main": "./src/main.js"},output: {path: path.resolve('./dist'),filename: './build.js'},module: {loaders: [{test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.(jpg|jpeg|png|gif|svg)$/,loader: 'url-loader?limit=200000'},{test: /\.less$/,loader: 'style-loader!css-loader!less-loader'}]},// 插件plugins: [new HtmlWebpackPlugin({// 输出index.html的模板文件template: './src/index.html'})],watch: true
}

3. ./src/index.html文件中不需要再引入<script src="../dist/build.js"></script>，输出的index.html文件中会自动生成：

 4. 在浏览器中打开dist文件夹中生成的index.html文件，可看到成功编译后的效果：

 

这篇关于接上一篇：webpack中html-webpack-plugin的使用及配置生成html的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---