Web-сервер разработки не перезагружает страницу при перекомпоновке файла - PullRequest
Новая
       15

Web-сервер разработки не перезагружает страницу при перекомпоновке файла

0 голосов
/ 21 марта 2019

Я сейчас пытаюсь включить свой webpack-dev-server, но когда я сохраняю свой файл, и он был правильно перестроен, моя страница не перезагружается.

Я использую этот скрипт для ejecute:

"start": "webpack-dev-server --mode development --host myIP --port 8080" (также я пробовал с --hot --inline и тоже не работал)

Вот мой конфиг веб-пакета: 

const path = require('path');
const basedir = path.join(__dirname, '../');

module.exports = {
    entry: {
        theme: path.join(basedir, 'assets/js', 'theme.js'),
        custom: path.join(basedir, 'assets/js', 'custom.js'),
    },
    output: {
        path: path.join(basedir, 'assets/js'),
        filename: '[name]real.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            }
        ]
    }
};

И я импортирую theme.js, например, с:

<script src='http://myIP:8080/themereal.js'></script>

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Вам необходимо установить режим часов. Вот пример файла, который я недавно использовал. Вам не нужно устанавливать больше атрибутов в режиме разработки. 

webpack --mode development

Этот конфиг - вебпак 4+ 

const path = require('path');
const webpack = require('webpack');

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = (env, argv) => {
    const {
        mode
    } = argv;
    return {
        module: {
            entry: path.join(__dirname, 'src', 'app.js'),
            watch: mode !== 'production',
            output: {
                path: path.join(__dirname, 'dist'),
                filename: mode === 'production' ? 'bundle.min.js' : 'bundle.js'
            },
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
            ],
            plugins: [
                new HtmlWebPackPlugin({
                    title: 'App',
                    template: "./src/index.html",
                    filename: "./index.html"
                })
            ]
        },
        devServer: {
            contentBase: path.join(__dirname, 'dist')
        }
    };
}
0 голосов
/ 21 марта 2019

Я пытался также с горячей заменой модуля, и он не работал.

После поиска много я увидел в клиентской консоли следующую ошибку: 

Invalid Host/Origin header client:187:9
[WDS] Disconnected!

Тогда я ищу, как это исправить, и нашел --disable-host-check вариант, который мне подходит!

"start": "webpack-dev-server --mode development --host myIP --port 8080 --disable-host-check"

Надеюсь, это будет полезно кому-то еще!

...