Я использую Koa Connect и Webpack 3 для настройки проекта, но после обновления некоторых пакетов горячая перезагрузка не работает, она отображается в консоли, но не отображается в браузере.
Я пытаюсьобновите веб-пакет 4 и измените конфигурацию, но не получите успеха.
ФАЙЛ КОНФИГ. ВЕБ-ПАК
"use strict";
require("dotenv").config();
var webpack = require("webpack");
var path = require("path");
var ProgressBarPlugin = require("progress-bar-webpack-plugin");
var API_ROOT = process.env.API_ROOT ||
"http://localhost:8080/api/";
var ASSETS_HOST = "http://127.0.0.1:8080";
var RECAPTCHA_SITE_KEY = process.env.RECAPTCHA_SITE_KEY;
var theme = {
"primary-color": "#75BF43",
"font-size-base": "13px"
};
var nodeModulesDir = path.resolve(__dirname, "node_modules");
var srcDir = path.resolve(__dirname, "src");
process.traceDeprecation = true;
module.exports = {
cache: true,
devtool: "eval-source-map",
mode: "development",
entry: {
app: ["webpack-hot-middleware/client", "./src/app"]
},
output: {
path: path.join(__dirname, "dist"),
publicPath: "/",
filename: "js/[name].bundle.js"
},
resolve: {
modules: [
path.resolve(__dirname, "node_modules"),
],
extensions: [".html", ".js", ".jsx", ".json", ".css", ".sass", ".scss",
".less", ".jpeg", ".png", ".gif", ".jpg"]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ProgressBarPlugin(),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new webpack.DefinePlugin({
API_ROOT: JSON.stringify(API_ROOT),
ASSETS_HOST: JSON.stringify(ASSETS_HOST),
RECAPTCHA_SITE_KEY: JSON.stringify(RECAPTCHA_SITE_KEY),
process: {
env: {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}
}),
],
stats: {
colors: true
},
module: {
rules: [
{
test: /\.(jsx|js)?$/,
enforce: "pre",
exclude: [nodeModulesDir],
loader: "eslint-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: [nodeModulesDir],
options: {
cacheDirectory: true,
plugins: [
"transform-decorators-legacy",
"add-module-exports",
"lodash",
["import", { libraryName: "antd", style: true }]
],
presets: ["es2015", "stage-0", "react"]
}
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
],
include: [srcDir]
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
],
exclude: [srcDir]
},
{
test: /(?!module)\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true,
modifyVars: theme
}
}
]
},
{
test: /\.module\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[local]___[hash:base64:5]"
}
},
{
loader: "less-loader",
options: {
sourceMap: true,
modifyVars: theme
}
}
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader",
options: {
limit: 10000,
mimetype: "application/font-woff"
}
},
{
test: /\.(png|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
],
noParse: [/jszip.js$/]
},
node: {
Buffer: false
}
};
server.dev.js
const send = require("koa-send");
const Router = require("koa-router");
const serve = require("koa-static");
const bodyParser = require("koa-bodyparser");
const logger = require("koa-logger");
const Koa = require("koa");
const webpack = require("webpack");
const devMiddleware = require("webpack-dev-middleware");
const hotMiddleware = require("webpack-hot-middleware");
const devConfig = require("./webpack.config");
const koa2Connect = require("koa2-connect");
const helmet = require("koa-helmet");
const RateLimit = require("koa2-ratelimit").RateLimit;
const { API } = require("mobx-model");
const { dreamfactoryMiddleware } = require("./server/dreamfactory/middleware");
const { notify } = require("./server/recaptcha");
const { exportExcel, exportCsv } = require("./server/export");
const { importExcel, importCsv } = require("./server/import");
const { generateUrl, generateUrlNoAuth, verifyOtp, verifyOtpNoAuth, login, confirm } = require("./server/otp");
const app = new Koa();
API.config({
urlRoot: process.env.API_ROOT,
requestHeaders: {
"Content-Type": "application/json; charset=utf-8"
}
});
const compile = webpack(devConfig);
const opts = {
publicPath: "/",
stats: {
colors: true
},
aggregateTimeout: 300,
poll: true
};
const loginLimit = RateLimit.middleware({
interval: { sec: 10 },
max: 20,
onLimitReached: notify,
prefixKey: "post/api/otp/login",
message: "Too many login attempts. Please try again after 5 minutes."
});
const passwordLimit = RateLimit.middleware({
interval: { sec: 15 },
max: 20,
onLimitReached: notify,
prefixKey: "post/api/user/password",
message: "Too many password reset attempts. Please try again after 15 minutes."
});
const expressDevMiddleware = devMiddleware(compile, opts);
const expressHotMiddleware = hotMiddleware(compile);
app.use(logger());
app.use(helmet());
app.use(bodyParser({ jsonLimit: "10mb" }));
const router = new Router();
app.use(router.routes());
app.use(router.allowedMethods());
app.use(koa2Connect(expressDevMiddleware));
app.use(koa2Connect(expressHotMiddleware));
app.use(dreamfactoryMiddleware);
app.use(serve(__dirname + "/static"));
app.use(async ctx => {
await send(ctx, "index.html", { root: __dirname + "/static" });
});
app.listen(8080);