个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我使用 Python Flask 作为我的后端，/路由转到 static/dist，这是 webpack 的构建目的地。我在前端使用 React。当我在 web pack 中构建时，它会删除 body 标记内的所有节点。这会导致错误:_registerComponent(...):目标容器不是 DOM 元素。我通过将 div 添加到生成的 index.html 来验证这是问题所在。有人知道复制这些节点的方法吗？我尝试为 HtmlWebpackPlugin 添加不同的配置。我还尝试在调用渲染之前在我的 index.jsx 文件中动态添加文档元素。这是我的 webpack 配置。
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
entry: __dirname + '/js/index.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/dist'
},
resolve: {
extensions: [".js", ".jsx", ".css"]
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: 'file-loader'
}
]
},
plugins: [
new ExtractTextPlugin('styles.css'),
new HtmlWebpackPlugin({title:"my app"})
]
};
module.exports = config;
最佳答案
HtmlWebpackPlugin 不会生成“react”特定的 html。在这种情况下，生成的 html 将为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
在这种情况下，您可以指定一个模板，您可以在其中手动创建所需的 div。
要实现此目的，您只需:
new HtmlWebpackPlugin({
template: path_to_where_my_template_is,
inject: 'body',
alwaysWriteToDisk: true
});
Webpack 将向您注入(inject)所需的脚本标签。
关于javascript - Webpack HtmlWebpackPlugin 删除 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50293309/
25
4
0
以下是 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
我是一名优秀的程序员,十分优秀！