webpack HtmlWebpackPlugin配置
const htmlWebpackPlugin = new HtmlWebpackPlugin({
inject: false,
template: resolveApp('./src/page/index.html'),
favicon: resolveApp('./src/assets/favicon.png'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
minifyHTML: true
}
});
html 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
</head>
<body>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
</body>
</html>
其中CSS代码遍历
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
最后得到结果是
<link rel="icon" type="image/png" href="/favicon.png">
<link href="[object Object]" rel="stylesheet">
动态的样式表变成Object怎么解决？
html-webpack-plugin css 提取 动态的样式表变成Object怎么解决？
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
分享- 邀请回答
-
1条回答 默认 最新
- 2021-12-09 11:01回答 3 已采纳 版本号改为"copy-webpack-plugin": "^9.0.0", 我原来是10报错
- 2018-04-30 09:03回答 1 已采纳 参考：https://blog.csdn.net/mjzhang1993/article/details/79850235
- 2022-01-07 13:00回答 3 已采纳 用cnpm试试 。 报错是 html-wabpack-plugin@5.3.2 不在 注册表中 。但我看了一下 有这个 版本
- 2021-07-01 03:42未知方程 无解的博客 webpack HtmlWebpackPlugin配置const htmlWebpackPlugin = new HtmlWebpackPlugin({inject: false,template: resolveApp('./src/page/index.html'),favicon: resolveApp('./src/assets/favicon.png'),minify: {...
- 2022-04-08 00:45
webpack 打包报错" Failed to load 'F:\VSCode\work\webpack\04.打包html资源\webpack.config.js' config，如何解决？
webpack
前端
回答 1 已采纳 试了很多方法，最后发现自己没有安装这个 html-webpack-plugin，解决办法，在初始文件中运行npm install --save-dev html-webpack-plugin即可 - 2022-10-06 21:35回答 2 已采纳 主要是你依赖的版本问题，修正可用后的依赖版本！【我建议学习时使用vue-cli脚手架生成项目减少入门时的难度，工作中更应该使用vue-cli生成项目框架，因为他们经过大量的测试和使用更稳定和靠谱】错误
- 2022-09-22 19:08回答 2 已采纳 利用uninstall把已经安装的全部卸载了，然后重新按照此链接安装，就成功了！http://t.csdn.cn/PzYRA
- 2018-10-15 10:38奔跑的飞牛的博客 html-webpack-plugin插件 这是一个webpack插件，可以简化HTML文件的创建，为您的webpack捆绑服务提供服务。这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用，它会更改每个编译。您可以让插件为您生成...
- 2023-03-13 23:17回答 3 已采纳 这个报错是因为 webpack 没有对 cheerio 这个模块进行处理，需要在 webpack 配置文件中添加相应的 loader 来处理该文件。 具体操作如下： 在 webpack 配置文件中添加
- 2021-12-10 14:20回答 2 已采纳 具体根据需求 配置 。 如果 定制化 需求 不高 内置的完全够用 。 有的项目 就必须 修够 webpack配置 。比如 打包后输出 特定格式 的文件 。文件夹
- 2021-10-08 17:48回答 1 已采纳 打开 network 排除缓存的可能
- 2021-06-19 00:56weixin_29468871的博客 webpack1+installnpm install injectjscss-template-html-webpack-pluginoryarn add injectjscss-template-html-webpack-pluginuseconst injectJsCssTemplateHtmlWebpackPlugin = require('injectjscss-template-ht...
- 2022-01-04 09:17回答 2 已采纳 这个需要看项目需要啦 每个项目都不一样 针对的都是相对的项目
- 2023-04-13 11:08神奇大叔的博客 文章目录 作用 涉及 webpack API compiler.context webpack 接收编译错误 compilation.errors compilation.getLogger("copy-webpack-plugin"); compilation.getCache("CopyWebpackPlugin"); 获取｜设置缓存 根据文件...
- 懒得跟猪打架的博客 webpack打包在使用了speed-measure-webpack-plugin进行了wrap操作之后，突然的出现了这个奇怪的错误提示。
- 没有解决我的问题, 去提问
