Как включить горячую перезагрузку модуля для Webpack в бэкэнде и во внешнем интерфейсе - PullRequest
Новая
       21

Как включить горячую перезагрузку модуля для Webpack в бэкэнде и во внешнем интерфейсе

0 голосов
/ 08 марта 2020

До разделения моего кода на бэкэнд и фронтэнд у меня был только фронтенд. Чтобы использовать HMR, я просто имею в конфигурации веб-пакета: 

module.exports = { // Frontend
    mode: 'development',
    target: 'web',
    entry: join(__dirname, '/src/frontend/app.js'),
    output: {
        path: join(__dirname, 'dist/frontend'),
        filename: 'app.bundled.js'
    },
    devtool: 'inline-source-map',
    devServer: {
        port: 1000,
        hot: true,
        open: true,
    },
    resolve: // ...
    module: {
        rules: [
            // ...
        ]
    },
    plugins: [
        new HotModuleReplacementPlugin(),
        new HTMLWebpackPlugin({
            showErrors: true,
            cache: true,
            template: join(__dirname, 'src/frontend/index.html')
        }),
        // ...
    ],
}

и выполняю его, используя (из package.json): 

"scripts" : {
    "start": "webpack-dev-server"
}

Теперь я решил добавить веб-пакет в бэкэнд, использующий другую конфигурацию.

Я понятия не имею, как включить горячую замену модуля с помощью этой схемы. Я новичок в веб-разработке, поэтому я едва справился с этим без регистрации ошибок.

Это мой текущий файл конфигурации: 

const HTMLWebpackPlugin = require('html-webpack-plugin');
const { join } = require('path');
const { HotModuleReplacementPlugin } = require('webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = [
    { // Backend
        mode: 'development',
        target: 'node',
        entry: join(__dirname, '/src/backend/server.js'),
        output: {
            path: join(__dirname, 'dist/backend'),
            filename: 'server.bundled.js',
            libraryTarget: 'commonjs2'
        },
        devtool: 'inline-source-map',
        resolve: //...
        externals: [nodeExternals()],
        module: {
            rules: [
                // ...
            ]
        },
        plugins: [
            new HotModuleReplacementPlugin()
        ]
    },
    { // Frontend
        mode: 'development',
        target: 'web',
        entry: join(__dirname, '/src/frontend/app.js'),
        output: {
            path: join(__dirname, 'dist/frontend'),
            filename: 'app.bundled.js'
        },
        devtool: 'inline-source-map',
        resolve: // ...
        module: {
            rules: [
                // ...
            ]
        },
        plugins: [
            new HotModuleReplacementPlugin(),
            new HTMLWebpackPlugin({
                showErrors: true,
                cache: true,
                template: join(__dirname, 'src/frontend/index.html')
            }),
            // ...
        ],
    }
];

На данный момент я выполняю это, используя: 

"scripts" : {
    "build": "webpack",
    "open": "start http://localhost:8080",
    "launch": "npm run-script open && node dist/backend/server.bundled.js",
    "start": "npm run-script build && npm run-script launch"
}

Но у меня больше нет горячей перезагрузки.

Итак, вопрос: Как я могу использовать горячую перезагрузку с двумя конфигурациями webpack (frontend, backend)?

Я видел этот вопрос , но он использует одну конфигурацию веб-пакета, поэтому я не думаю, что она применима к моему делу.

...