Webpack HtmlWebpackPlugin 移除 DOM 个元素

Question

我正在为我的后端使用 Python Flask，其中 / 路由指向 static/dist，这是 webpack 的构建目标。我在前端使用 React。当我在 web pack 中构建时，它会删除 body 标签中的所有节点。这导致 Error: _registerComponent(...): Target container is not a DOM element。我已通过将 div 添加到生成的 index.html 来验证这是问题所在。有人知道复制这些节点的方法吗？我尝试为 HtmlWebpackPlugin 添加不同的配置。我还尝试在调用 render 之前在我的 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;

Answer 1

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 将向您注入所需的脚本标签。

Answer 2

我明白了。我需要添加指向 index.html 文件的模板属性。

new HtmlWebpackPlugin({
  title: 'My App',
  template: 'index.html'
})

Webpack HtmlWebpackPlugin 移除 DOM 个元素

Webpack HtmlWebpackPlugin removes DOM elements

javascript

reactjs

webpack

html-webpack-plugin