这篇文章是关于webpack对html文件的处理，步骤非常详细。有需要的朋友可以参考一下
。
我们所有的方法都打包在dist的文件夹下，我们的html在自己定义的文件夹下。如果我们手动去src一个一个的介绍dist的这些文件夹下的js，就有点太不靠谱了。
使用webpack插件:HtmlWebpackPlugin
HtmlWebpackPlugin的配置项包括:
| 类型 | 描述 |
|---|---|
| {String} | 生成的HTML文档的标题。 | {String} | 要生成HTML的文件。您可以指定一个目录 | 模板{String} | 模板文件基于 | 注射{布尔|字符串} | 将js资源注入页面的位置，值为:true \ ' head ' \ ' body ' \ false。当传递true或' body '时，所有JavaScript资源都将放在文本元素的底部。“Head”将脚本放在head元素中。 | 收藏夹图标{String} | 将给定的图标路径添加到输出HTML中。 | 混杂{Boolean} | 如果为true，则将唯一的编译哈希附加到webpack中包含的所有脚本和CSS文件。这对于缓存清理很有用。 | 大块{?} | 放入你需要介绍的资源模块。 | 排除Chunks{?} | 不要放入你的一些资源模块 |
预期目标:我的项目是一个多入口文件项目。希望每个入门页面都有相应的js模块和css的介绍
。比如登录页面会介绍登录的js和css，索引会介绍对应的js和css。
Webpack.config.js的配置如下:
const path = require('path');const webpack = require('webpack')const ExtractTextPlugin = require("extract-text-webpack-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin');const configs = { entry:{ 'commom':['./src/page/common/index.js'], 'index':['./src/page/index/index.js'], 'login':['./src/page/login/index.js'] }, output:{ path:path.resolve(__dirname, 'dist'), filename:'js/[name].js' }, module:{ rules:[ { test:/\.css$/, use:ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins:[ //独立通用模块 new webpack.optimize.CommonsChunkPlugin({ name : 'common', filename : 'js/base.js' }), //独立打包css new ExtractTextPlugin('css/[name].css'), //对html模板进行处理，生成对应的html,引入需要的资源模块 new HtmlWebpackPlugin({ template:'./src/view/index.html',//模板文件 filename:'view/login/index.html',//目标文件 chunks:['commom','login'],//对应加载的资源 inject:true,//资源加入到底部 hash:true//加入版本号 }) ] } module.exports= configs然后打包结果如下 
那么打包结果如下
其中生成的目标文件： 
生成的目标文件:
我们所有的方法都打包在dist的文件夹下，我们的html在自己定义的文件夹下。如果我们手动去src一个一个的介绍dist的这些文件夹下的js，就有点太不靠谱了。
使用webpack插件:HtmlWebpackPlugin
HtmlWebpackPlugin的配置项包括:
| 类型 | 描述 |
|---|---|
| {String} | 生成的HTML文档的标题。 | {String} | 要生成HTML的文件。您可以指定一个目录 | 模板{String} | 模板文件基于 | 注射{布尔|字符串} | 将js资源注入页面的位置，值为:true \ ' head ' \ ' body ' \ false。当传递true或' body '时，所有JavaScript资源都将放在文本元素的底部。“Head”将脚本放在head元素中。 | 收藏夹图标{String} | 将给定的图标路径添加到输出HTML中。 | 混杂{Boolean} | 如果为true，则将唯一的编译哈希附加到webpack中包含的所有脚本和CSS文件。这对于缓存清理很有用。 | 大块{?} | 放入你需要介绍的资源模块。 | 排除Chunks{?} | 不要放入你的一些资源模块 |
预期目标:我的项目是一个多入口文件项目。希望每个入门页面都有相应的js模块和css的介绍
。比如登录页面会介绍登录的js和css，索引会介绍对应的js和css。
Webpack.config.js的配置如下:
const path = require('path');const webpack = require('webpack')const ExtractTextPlugin = require("extract-text-webpack-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin');const configs = { entry:{ 'commom':['./src/page/common/index.js'], 'index':['./src/page/index/index.js'], 'login':['./src/page/login/index.js'] }, output:{ path:path.resolve(__dirname, 'dist'), filename:'js/[name].js' }, module:{ rules:[ { test:/\.css$/, use:ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins:[ //独立通用模块 new webpack.optimize.CommonsChunkPlugin({ name : 'common', filename : 'js/base.js' }), //独立打包css new ExtractTextPlugin('css/[name].css'), //对html模板进行处理，生成对应的html,引入需要的资源模块 new HtmlWebpackPlugin({ template:'./src/view/index.html',//模板文件 filename:'view/login/index.html',//目标文件 chunks:['commom','login'],//对应加载的资源 inject:true,//资源加入到底部 hash:true//加入版本号 }) ] } module.exports= configs然后打包结果如下 那么打包结果如下
其中生成的目标文件： 生成的目标文件:
相关建议:
在webpack中使用ECharts的详细说明
Node.js和jade生成静态html文件实例。
webpack插件的详细说明
以上是webpack处理html文件的细节。更多详情请关注AdminJS.cn其他相关文章！
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！