Webpack HtmlWebpackPlugin удаляет элементы DOM - PullRequest
Новая
       11

Webpack HtmlWebpackPlugin удаляет элементы DOM

0 голосов
/ 11 мая 2018

Я использую Python Flask для моего бэкэнда с / route, идущим к static / dist, который является местом назначения веб-пакета.Я использую React на веб-интерфейсе.Когда я делаю сборку в веб-пакете, он удаляет все узлы внутри тега body.Что вызывает Error: _registerComponent(...): Target container is not a DOM element.Я подтвердил, что это проблема, добавив div в сгенерированный index.html.Кто-нибудь знает способ скопировать эти узлы?Я попытался добавить различные конфигурации для HtmlWebpackPlugin.Я также попытался динамически добавить элемент документа в мой файл index.jsx перед вызовом рендера.Вот мой конфиг вебпака.

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;

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Я понял. Мне нужно было добавить свойство шаблона, указывающее на файл index.html. 

new HtmlWebpackPlugin({
  title: 'My App',
  template: 'index.html'
})
0 голосов
/ 11 мая 2018

HtmlWebpackPlugin не генерирует "реагировать" на определенные 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 введет вам необходимые теги скрипта.

...