htmlwebpackplugin（htmlwebpackplugin 多页面）

本篇文章给大家谈谈htmlwebpackplugin，以及htmlwebpackplugin 多页面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、webpack 如何打包html,在html中可以压缩哪些东西？如何配置?
• 2、webpack使用HtmlWebpackPlugin进行cdn配置
• 3、htmlwebpackplugin配置后直接运行不显示内容
• 4、webpack 打包运行react项目报错HtmlWebpackPlugin is not defined解决方案

webpack 如何打包html,在html中可以压缩哪些东西？如何配置?

1. 安岩颂装: html-webpack-plugin 插件完成打包

2. 命令：npm install html-webpack-plugin –save-dev

3. 配置：

引入粗虚郑：const HtmlWebpackPlugin = require('html-webpack-plugin')；

module.exports = {

entry: 'index.js',

output: {

path: __dirname + '/dist',

filename: 'index_bundle.js'

},

plugins: [

new HtmlWebpackPlugin({

title: 'My App',（生成的页面标题）

filename: 'assets/admin.html'，誉指（生成的文件名）

template: 'src/assets/test.html'，（原来的index.html）

minify: {

collapseWhitespace: true,

removeComments: true,

removeRedundantAttributes: true,

removeScriptTypeAttributes: true,

removeStyleLinkTypeAttributes: true,

useShortDoctype: true

}

})

]

} （BY三人行慕课）

[img]

webpack使用HtmlWebpackPlugin进行cdn配置

其中build文件夹中的webpack.prod.conf.js是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。

在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。

在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。

注意安装时记得-S，它的作用是安装完后在package.json项目文件中插入记录，后续操作需要读取已安装模块

对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。

依次搜索出前面模块，结果如下

按照规律，得出cdn资源路径规则为

使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接，为了方便维护，我们通过在build/utils.js文件上添加几个方法，将来在webpack.dev.conf.js和webpack.prod.conf.js上可以使用。

如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行

1.添加兄正粗cdn根地址

2.添加cdn模块 按照需要删改

这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery，具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配(目前没找到更好的做法)。

3.添加获取版本号方法

4.导出不需要被打包的cdn模块配置重点

在webpack热启动本地调试的时候，我们可以使用cdn。

在build/webpack.dev.conf.js中，默认已经引入了utils.js，所以可以直接调用相关方法，如果是自定义的文件，记得引入。

紧接着我们在该文件下找到devWebpackConfig下的plugins下的HtmlWebpackPlugin插件，它的作用是动态构建html页面，原始配置如下：

我们可以往里面添加点自定义属性，方便在index.html中调用。，修改如下：

其中cdnConfig和onlyCss自定义属性，在html上通过htmlWebpackPlugin.options可以读取到。

更多html-webpack-plugin配置情况官网，这里暂时不需要更多。

webpack.prod.conf.js添加cdn配置和忽略模块

在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。

注意此处的externalModules，后面用到，也就是比dev多的步骤。

externals代表构建时不需要被处理的模块，也就是前面说的scope需要注意的地方。

和dev一样，我们修改webpackConfig下的plugins下的HtmlWebpackPlugin插件配置 (这里的默认配置比dev的多，主要是css压缩和js压缩相关)

加入和dev一样的两个配置，不过需要把onlyCss改为true，因为我们希望打包时不单单使用css。

webpack配置清宴已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直羡镇接使用，使用语法是ejs，和asp.net，jsp，php类似。

htmlwebpackplugin配置后直接运行不显示内容

win+r，然后找到菜单标签，运行cmd，回车，关掉窗口，就有内容了。

快捷键win+r打开运行窗口，然后点击小三角看到是空记录的，我们找到开始按钮，右键选择属性，再出的界面点击开始菜单标签，再出的界面腔册键点击开始菜单标签，然后我们再次打开运行窗口输入CMD命令，按回车，然后关姿尘掉该窗口伍巧，点击三角号，这回我们发现有记录了。

webpack 打包运行react项目报错HtmlWebpackPlugin is not defined解决方案

运行yarn webpack打包项目报错HtmlWebpackPlugin is not defined，采坑过程升级誉瞎穗webpack-cli版本、降低webpack版本都没庆卜有作用，我的项目中使用的是webpack5版本。

解决方案：

在webpack.config.js 文件神吵中

首先确保安装webpack、webpack-cli、html-webpack-plugin 才可启动成功

关于htmlwebpackplugin和htmlwebpackplugin 多页面的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。