У меня есть конфигурация веб-пакета, которая генерирует пакет реагирования, когда я напрямую вызываю веб-пакет. Поскольку я хотел бы включить горячую перезагрузку, мне нужно запустить сервер разработки webpack вместе с моим экспресс-сервером разработки (обслуживающим конечные точки API), который работает на порту 3000.
webpack.dev.config.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const Jarvis = require('webpack-jarvis');
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge({}, {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
output: {
chunkFilename: '[name]-[hash].js',
publicPath: "http://localhost:3000/build/",
crossOriginLoading: 'anonymous'
},
optimization: {
noEmitOnErrors: true,
namedModules: true,
},
plugins: [
new webpack.IgnorePlugin(/^\./locale$/, /moment$/),
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$',
inject: 'head',
filename: path.join(__dirname, "/dist/index.html"),
template: path.join(__dirname, "/public/index.html"),
chunks: ['common', 'main']
}),
new Jarvis({port: 7003}),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
_DEVELOPMENT_: true,
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["es2015", "react", "stage-0"] }
}
},
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["es2015", "react", "stage-0"] }
}
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: ["file-loader"]
},
{
test: /\.svg$/,
use: {
loader: "svg-inline-loader"
}
},
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
options: {
compilerOptions: {
declaration: false,
target: "es5",
module: "commonjs"
},
transpileOnly: true
}
}
]
}
]
},
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
entry: {
main: [
'babel-polyfill',
'react-hot-loader/patch',
'webpack/hot/only-dev-server',
'webpack-dev-server/client?https://0.0.0.0:7001',
'./src/index.jsx',
],
}
});
dev-server.js
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.dev.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
headers: {'Access-Control-Allow-Origin': '*'},
hot: true,
https: true,
clientLogLevel: 'error',
overlay: true,
historyApiFallback: true,
disableHostCheck: true,
watchOptions: {
ignored: //node_modules/.*/,
},
stats: {
assets: false,
cached: false,
cachedAssets: false,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
colors: true,
depth: false,
entrypoints: true,
excludeAssets: /app/assets/,
hash: false,
maxModules: 15,
modules: false,
performance: true,
reasons: false,
source: false,
timings: true,
version: false,
warnings: true,
},
}).listen(7001, '0.0.0.0', function(err, result) {
console.info(`Serving chunks at path ${config.output.publicPath}`);
});
скрипты package.json
"scripts": {
"build": "webpack --config webpack.dev.config.js --progress --profile --colors",
"start-dev": "node dev-server.js",
"build-prod": "webpack --config webpack.prod.js --progress --profile --colors",
"start": "node server.js"
},
если я побегу
npm run build
В результате получается новый пакет js и html: расстояние/main.js расстояние/index.html
однако идеальная ситуация - запустить
npm run start-dev
который запустит сервер разработки, это означает, что пакеты успешно собраны, но они никогда не появляются в моей файловой системе, поэтому должна быть конфигурация вывода, которую я неправильно настроил на сервере разработки?
РЕДАКТИРОВАТЬ
Проблема оказалась такой, как описано в посте ниже. Чтобы получить доступ к перезагрузке живого пакета, я отредактировал общедоступный путь пакета с «производственного сервера» обратно только к месту сборки, а затем получил доступ к странице с сервера разработки вместо страницы, обслуживаемой «производственным сервером».
output: {
chunkFilename: '[name]-[hash].js',
publicPath: "/build/",
crossOriginLoading: 'anonymous',
path: path.join(__dirname, "/dist"),
},



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Сервер разработки Webpack не записывает ваши изменения на диск каждый раз, когда вы меняете исходный код. Вместо этого он наблюдает за изменением ваших файлов, обрабатывает их и обслуживает из памяти. Проверьте здесь, так как он подробно объясняет.
Спасибо, это было недоразумение, которое у меня было.