Я создал две конфигурации. Один для стороны клиента, другой для стороны сервера. Я пытаюсь включить HMR
- Горячая замена модуля на стороне клиента, но он не работает.
Моя конфигурация Webpack:
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const clientConfig = {
mode: 'development',
entry: './src/clients/index.js',
output: {
path: path.resolve(__dirname, 'public/client'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.(js|jsx)?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-react"]
}
}
},{
test: /\.s[ac]ss$/i,
use: ['style-loader','css-loader','sass-loader'],
},{
test: /\.html$/,
use: [{
loader: "html-loader"
}]
}],
},
plugins: [new HtmlWebpackPlugin({
template: './src/clients/index.html',
filename: 'index.html'
}), new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: path.join(__dirname, 'public/client'),
compress: true,
hot: true,
port: 8080
}
}
const serverConfig = {
mode: 'development',
entry: './src/server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'public/server'),
filename: 'server.js'
},
module: {
rules: [{
test: /\.js?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-react"]
}
}
}],
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "false"
})
]
}
module.exports = [clientConfig, serverConfig]
Также scripts
в package.json
:
"scripts": {
"build": "webpack",
"server": "nodemon ./public/server/server.js",
"client": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
}
Примечание. Когда я пытаюсь экспортировать только один модуль из Webpack, HMR работает нормально.
module.exports = clientConfig;
Чего мне не хватает при работе с несколькими конфигурациями?