本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01html文件下载代码-html实现文件下载功能

序言:

根据以前的学习培训，我已经了解怎样装包js和json文档了。

我都学了怎样为装包款式文档配备加载器。

可是以前我们是手工制作建立html，手工制作导进装包好的js文件，这就不方便了。

使我们一起来看看webpack是如何处理html文档的。

1.安裝解决html的软件。

叙述:

webpack装包html文档資源,并不是应用loader反而是应用软件应用html-webpack-plugin软件自动生成html文档

1.1下载插件。

棉纱加上html-互联网包-软件-D

1.2配备软件。

在webpack.config.js中配备软件叙述

引进免费下载好的软件在plugins中配备软件

编码如下所示:

// 1.详细介绍html软件，

const HtmlWebpackPlugin =

require(" html-web pack-plugin ")const { resolve } = require(" path ")；module.exports = {entry:"。/src/main.js "，輸出:{filename:"bundle.js "，途径:resolve(_ dirname，" dist")}，控制模块:{rules:[{test: /\。css$/，应用:[“style-loader”，“CSS-loader”]}]}，//配备软件软件:[//配备html软件new html webpacklugin()]，方式:“开发设计”}。

1.3包裝結果叙述。

用webpack指令装包。

会发觉装包后的index.html是一个空的html文档 ,沒有别的构造內容由于软件html-webpack-plugin是全自动建立一个新的html文档,并全自动引入bundle.js因而我们自己开发设计的index.html內容并沒有解决到装包后的html文档中

配备编码如下所示:

const HtmlWebpackPlugin =

require(" html-web pack-plugin ")const { resolve } = require(" path ")；module.exports = {//...软件:【新创建html webpackplugin({//配备html装包模版模版:")。/src/main.html"})]//...}

2.将我们自己的html內容插进到装包的html文档中。

2.1叙述

src文件夹名称使大家开发设计文件夹名称,因而我也许会在这个文件夹名称中开发设计html文档內容可是html-webpack-plugin会在装包的dist文件目录中转化成新的html文档,新转化成的文档中,不包含大家开发设计的html文档內容如果我们必须将自行研发的html內容也插进到装包后的html文档中,就必须配备

2.2在src文档中建立新的html并开发设计內容。

你好世界

2.3在webpack.config.js中配备软件

在webpack.config.js的软件html-webpack-plugin中配备html模版

将大家开发设计的html文档的內容插进到软件转化成的html文档中。

编码如下所示:

const HtmlWebpackPlugin =

require(" html-web pack-plugin ")const { resolve } = require(" path ")；module.exports = {//...软件:【新创建html webpackplugin({//配备html装包模版模版:")。/src/main.html"})]//...}

这时，装包后，查询dist文件目录中的index.html文档，您将得到大家开发设计的內容。

3.配备当地webpack。

3.1为何必须配备网络连接包？

webpack版本号的不一样,很有可能会对新项目产生危害新项目是多的人协作开发设计,假如每一个人计算机都全局性安裝不一样的webpack,会造成新项目配备出难题因而必须配备新项目当地webpack,及其配备脚本制作运作webpack指令

3.2免费下载并配备当地webpack。

免费下载网络连接包。

$棉纱加上互联网包互联网包

3.3配备脚本制作指令。

脚本制作指令应用webpack装包表明。

在任何的用户里应用webpack指令,默认设置全是全局性安裝的webpack新项目为了能确保统一,必须应用新项目当地webpack开展装包脚本制作中使用的webpack是应用当地webpack指令

在package.json中配备脚本制作指令

“脚本制作”:{“检测”:“回显”不正确:未找到检测\" &&撤出1 \ "，搭建:“”web pack }，

配备进行后，您还可以应用npm运作搭建指令来应用当地webpack。