webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不同的j

el09xccxy 发布于2019-08-23 18:00 / 1690人阅读

摘要：以插件为例先安装插件，在命令行中输入执行完之后，在的中就多了下面的代码即安装了插件在配置文件中让插件生效，在对象中加入一个字段，这个字段接收一个数组，也就意味着，可以给应用很多各种各样的插件先将插件引进来由于插件可以携

以html-webpack-plugin插件为例

1、先安装插件，在命令行中输入：npm i -D html-webpack-plugin（执行完之后，在package.js的devDependencies中就多了下面的代码

"html-webpack-plugin": "^3.2.0"
即安装了html-webpack-plugin插件
）

2、在配置文件中让插件生效，在module.exports={}对象中加入一个plugins字段，这个字段接收一个数组，也就意味着，可以给webpack应用很多各种各样的插件

先将插件引进来：
const HtmlWebpackPlugin = require("html-webpack-plugin");
由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。
plugins:[

    new HtmlWebpackPlugin()//注意后面不要加分号，否则执行会出错
]

运行npm run dev 在dist中会自动生成一个index.html文件，并且这个html中自动引入了main.js（注意：这里的dev和main.js都是我们之前配置好的，根据你自己的设定可以不同，如果，还有疑问，可以看我之前写过的文章
https://mp.csdn.net/postedit/...），代码如下所示

如果我们有自己的html文件，里面已经有一些写好的结构，想要在这个文件的基础上加载打包后的main.js，我们只需要在配置里面指定一个参数（是一个对象），这个对象里面可以包含两个属性filename和template

filename：指定当我们打包好之后，新建的html文件的名字叫什么，如果不写的话，默认生成的是index.html
template：指定以哪个html为模板去创建
plugins:[

    new HtmlWebpackPlugin({
        filename:"first.html",//打包好后，新建的html名字为first.html
        template:"./src/index.html"//以src下面的index.html为模板去创建新的html文件
    })
]

打包好之后，在dist文件中就会自动生成一个first.html文件，并且，这个html文件中包含了index.html中的结构，并且，也会自动引入main.js文件

OK，就先写这么多，持续更新中……

更新：

html压缩输出：在插件配置文件中加入：minify;{

collapseWhitespace:true,//压缩空白

removeAttributeQuotes:true//删除属性双引号

}

生成链接消除缓存：

在插件配置文件中加入hash(bool)：hash:true

在生成的html文件中加入自己的title：首先在插件配置文件中加入title:"名字"，然后一定要记得在模板的title中加入下面的代码

<%= htmlWebpackPlugin.options.title %>
想要生成多个html页面：filename，这个上面我们已经说到过，filename可以指定生成html文件的名字，那么这也就可以用来区分我们要生成的html页面，否则默认情况下生成的都是index.html，那么自然也就无法生成多个页面了，用法上面已经讲过了，就不再重复说了（注意，想要生成多个html页面，就要调用多次插件）

想要在生成的不同的html页面中引入不同的js文件，怎么做？很简单，只要在插件配置文件中加入：chunks:["入口文件名"]，即可，如果不加的话，会在生成的html页面中引入所有的入口文件哦

看完整webpack配置文件代码（下面的是生成多个页面，引入不同的js文件）

webpack.config.js中的代码

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {

entry:{//入口文件
    one:"./src/index.js",
    two:"./src/main.js"
},
output:{//输出的文件
    path:path.resolve(__dirname,"dist"),
    filename:"[name].boundle.js"
},
mode:"development",
plugins:[
    new HtmlWebpackPlugin({
        template:"./src/one.html",
        filename:"one.html",//生成的html页面的名字为one.html
        title:"one",//它的title为one，记得要在src/one.html中加入<%= %>
        hash:true,
        chunks:["one"]
    }),
    new HtmlWebpackPlugin({
        template:"./src/two.html",
        filename:"two.html",
        title:"two",
        hash:true,
        chunks:["two"]
    })
]

}
因为涉及到title的变化，所以也把两个模板html中的代码贴出来

one.html


<%= htmlWebpackPlugin.options.title %>

hello one

two.html


<%= htmlWebpackPlugin.options.title %>

hello two

嗯、是不是超级简单，其实这些在webpack的官网上都可以找到，附上链接，有兴趣的可以看看哦，而且官网巨详细滴
https://github.com/jantimon/h...
再稍微提一个，删除文件的插件吧，这个很简单，我就把步骤写一下，不做详细的扩展

插件：clean-webpack-plugin

1、下载：npm i -D clean-webpack-plugin

2、引入：在配置文件中引入，和上面的引入方式一样;const CleanWebpackPlugin = require("clean-webpack-plugin")

3、使用：new CleanWebpackPlugin(["dist"])//代表删除dist这个文件夹，当然也可以是其他的，很简单就不再说了

其实，插件嘛，只要一个会用了，其它的也就简单了，所以也就不再多提什么了，如果我觉得有必要的话，还会再写的

还有就是打字有点快，可能有的地方不小心打错了，还请大家海涵，如果发现并提出来那就更好了，还有一种可能，就是打的都对（哈哈），不过也不介意提出别的关于技术的意见，什么都行滴，互相学习互相进步

作者：冰雪为融
来源：CSDN
原文：https://blog.csdn.net/lhjueji...
版权声明：本文为博主原创文章，转载请附上博文链接！

云服务器 GPU云服务器 php引入不同的页面中引入的引入html页面 html调整引入页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104491.html

➹使用webpack配置多页面应用(MPA)

使用webpack配置MPA 为什么需要使用 webpack 构建多页应用呢？因为某些项目使用 SPA 不太合适（大多是 SEO 的原因），或者您在做项目时有其他的需求。如果你有如下需求：使用 ES6 进行开发期望使用面向对象开发（class）自动压缩合并 CSS 和 JS 文件使用 ESLint 进行代码检查自动生成 HTML 文件自动抽取 CSS 文件 ... 有了这些需求，...

rainyang 2019-08-23 14:23 评论0 收藏0
[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配

摘要：上文我们对的实例进行了遍历分析，讲解了几个常用属性以及自定义属性的添加，本文，我们继续深入他的配置选项的探讨一选项这个属性非常有用，可以指定某个页面加载哪些如文件我们可以用他做多个页面模板的生成比如，我们在实际开发中，做一个博客网站，一上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析，讲解了几个常用属性( inject, mini...

jokester 2019-08-22 11:11 评论0 收藏0
我的WebPack入门（二）——html-webpack-plugin

摘要：可以根据你设置的模板，在每次运行后生成对应的模板文件，同时所依赖的也都会被引入，如果中含有值，则生成的模板文件也会引入正确版本的文件。上一节的入门中，只是跑通了一个很简单的webpack项目的流程，对其中的参数以及实战运用中的一些用法并不太清楚，虽然目前工作项目中并没有用起webpack，不过觉得还是需要再去摸索一番，以便可以更清楚的用起这个工具。上一节最终运行webpack命令，...

wmui 2019-08-20 14:50 评论0 收藏0
Webpack 4 和单页应用入门

摘要：但由于和技术过于和复杂，并没能得到广泛的推广。但是在浏览器内并不适用。依托模块化编程，的实现方式更为简单清晰，一个网页不再是传统的类似文档的页面，而是一个完整的应用程序。到了这里，我们的主角登场了年此处应有掌声。和差不多同期登场的还有。 Github：https://github.com/fenivana/w...webpack 更新到了 4.0，官网还没有更新文档。因此把教程更新一下...

Zoom 2019-08-21 11:23 评论0 收藏0
来,webpack撸一个多页面应用脚手架!!!

摘要：抽取文件插件引入入口配置多个实例使用正则匹配到每个页面对应文件夹下的文件并配置来进行解析从而实现对插件实例引入方法总结一个简易版的多页面应用脚手架就这样搞定啦是不是很简单地址喜欢的童鞋给个哈您的支持就是我最大的动动动力使用 webpack 构建多页面应用前言之前使用 vue2.x + webpack3.x 撸了一个 vue 单页脚手架 vue 版 spa 脚手架有兴趣的同学可以...

王伟廷 2019-08-22 17:36 评论0 收藏0