- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
HtmlWebpackPlugin 不会向 webpack 输出目录输出任何内容:我有这样的设置:
var config = {
context: __dirname + '/client',
entry: {
main: [
"./app.js"
]
},
output: {
path: __dirname + "./public",
filename: "dist.js"
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'client'),
],
exclude: /node_modules/
},
{
test: /\.less$/,
loader: "style!css!less"
},
{
test: /\.css/,
loader: "style!css"
}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo'
})
]
}
但是没有向公众输出index.html 文件。
我刚刚收到此消息:
Asset Size Chunks Chunk Names
dist.js 530 kB 0 [emitted] main
dist.js.map 638 kB 0 [emitted] main
index.html 181 bytes [emitted]
[0] multi main 28 bytes {0} [built]
+ 130 hidden modules
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
最佳答案
HtmlWebpackPlugin 简化了 HTML 文件的创建来为您的 webpack 包提供服务。这对于在 filename
中包含 hash
的 webpack bundle 特别有用,该哈希值会更改每个编译。您可以让插件为您生成 HTML 文件,使用 lodash 模板提供您自己的模板,或者使用您自己的加载器。
wbpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path=require('path');
var webpackConfig = {
entry: './src/index.js',
output: {
path:path.resolve(__dirname,'dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
module.exports = webpackConfig;
输出:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="index_bundle.js"></script></body>
</html>
你也可以像这样进行定制 configuration
new HtmlWebpackPlugin({
title:'sample text',
filename:'sample.index'
)
关于webpack - HtmlWebpackPlugin 不输出任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39003326/
以下是 webpack 配置条目: entry:{ background: './app/main/background.js', options: './app/main/optio
我需要缩小 2 个 JS 文件并将其中一个内联到 HTML 模板中。我有以下目录结构: - src ---- page.html ---- script-to-inline.js ---- scrip
HtmlWebpackPlugin 不会向 webpack 输出目录输出任何内容:我有这样的设置: var config = { context: __dirname + '/client',
我的环境如下 webpack 角度2 HtmlWebpackPlugin 我提取的 webpack.config.js 文件如下 entry: { 'polyfills': './src/poly
我正在尝试使用 webpack 进行代码/包分割,但是遇到了一个问题。据我所知,HTMLWebpackPlugin 应该动态地将脚本标签插入到 HTML 文件中。该 HTML 文件默认为 index.
我正在从webpack 3迁移到4,这很痛苦;) 我收到此错误: this.htmlWebpackPlugin.getHooks is not a function 我正在尝试升级所有插件,但也许我在
我有很多 HTML 文件需要处理,我正在使用 HtmlWebpackPlugin来生成它们。以下是我的 webpack 中的配置之一: new HtmlWebpackPlugin({
我对 webpack 和其他东西非常陌生,我需要一个解决方案来分离 index.html 的 base href 和 src >bundle.js,用于开发和生产,因为两者是不同的。 为了发展 基本
如何组合多个htmlwebpackplugin代码,写出更优雅的代码? 我需要一个解决方案,可以让我免于每次都重复这个 new HtmlWebpackPlugin({//..somecode}) 部分
给定输入/输出,如 entry: { app: 'src/client/app.js', unauthApp.js: 'src/client/unauth.js' }, outpu
我正在尝试使用带有 HtmlWebpackPlugin 插件的 Webpack 缩小我的 html 文件。我设法将 index.html 文件制作到我的 dist 加载器中,但我在缩小它时遇到了一些麻
我按照这个例子(http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760301)启动一个reactj应用程序
基于本教程: using html-webpack-plugin to generate index.html 如果您添加 标题 html-webpack-plugin 选项的选项,如下所示: new
我正在使用 HtmlWebpackPlugin 将 javascript 注入(inject)到我的模板文件中: ... ... inlineScr
我想我将从我的 webpack 配置开始。 const webpack = require('webpack'); const path = require('path'); /** * Envir
当使用HtmlWebpackPlugin生成dist/index.html文件时,我们可以使用inject选项自动创建 javascript 捆绑文件的标签: new HtmlWebpackPlugi
我正在努力提高我们网站的加载速度。所以我一直在忙于我们的 webpack.config。 经过多次修改后,我现在可以正确分离和散列模块。我还使用 HtmlWebpackPlugin 从模板中自动生成
这是我的 webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack
我的 package.json 的一个片段 "vue": "^2.6.11", "@vue/preload-webpack-plugin": "^2.0.0", vue.config.js 文件, c
我正在使用带有 HTMLWebPackPlugin 的 Webpack 4。我目前正在处理近 30 个不同的页面,并且正在向前推进。这是我在代码中的示例... new HTMLWebp
我是一名优秀的程序员,十分优秀!