我遵循了 webpack-hot-middleware 的 GitHub 页面中的教程我就是无法让它发挥作用。我在浏览器中收到下一个:index.bundle.js:1 Uncaught SyntaxError: Unexpected token <因为找不到文件。我知道webpack-dev-middleware在内存中提供文件，但我不知道如何让它工作。
这是 server.js:
//...
var webpack = require('webpack');
var webpackConfig = require('./../webpack.config');
var compiler = webpack(webpackConfig);
console.log("QQQ", webpackConfig.output.publicPath);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
//...
app.get('*', async (req, res) => {
//...
res.render('index', {
//...
});
});
const server = new http.Server(app); // Create a server through Express
server.listen(process.env.NODE_PORT, err => {
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${process.env.NODE_PORT}`);
});
这里是 index.ejs :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<base href="/">
<meta name="keywords" content="<%- keywords %>" />
<meta name="description" content="<%- description %>" />
<title><%- title %></title>
<!-- ... -->
<!-- PRERENDER:DELETE -->
<script defer src="/js/index.bundle.js"></script>
<script defer src="/js/vendor.chunk.js"></script>
<!-- PRERENDER:END -->
<%- headOther.toString() %>
</head>
<body>
<div id="main"></div>
</body>
</html>
最后这里是 webpack.config.js :
const webpack = require("webpack");
const path = require("path");
const isProduction = process.env.NODE_ENV === "production";
module.exports = {
mode: isProduction ? "production" : "development",
entry: {
index: [
"webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000",
path.join(__dirname, "src", "client.js")
]
},
context: path.join(__dirname, "src"),
output: {
path: path.join(process.env.IMOCENTRAL_SITE_DATA, "static"),
publicPath: "/js/",
chunkFilename: "js/[name].chunk.js",
filename: "js/[name].bundle.js"
},
devtool: isProduction ? undefined : "cheap-module-eval-source-map",
module: {
rules: [
{
test: /\.js?$/,
exclude: [/node_modules/, /\.tem\.js$/],
loader: "babel-loader",
options: {
cacheDirectory: "babel_cache",
presets: ["@babel/react", ["@babel/env", { modules: false, useBuiltIns: "usage", corejs: 2 }]],
plugins: [
["@babel/plugin-syntax-object-rest-spread"],
["@babel/plugin-syntax-async-generators"],
["@babel/plugin-transform-regenerator"],
["@babel/plugin-syntax-dynamic-import"],
["@babel/plugin-proposal-class-properties"],
["react-hot-loader/babel"]
]
}
},
//...
]
},
plugins: [
new webpack.DefinePlugin({
__production: isProduction ? "true" : "false",
'process.env.NODE_ENV': JSON.stringify(isProduction ? "production" : "development"),
AppConfig: JSON.stringify(require("./src/data/MainData").default)
}),
new webpack.HotModuleReplacementPlugin()
],
optimization: {
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /node_modules/,
chunks: "initial",
name: "vendor",
enforce: true
}
}
}
},
resolve: {
modules: [path.resolve(__dirname, "src"), path.join(__dirname, "node_modules")],
alias: {
ExternalStyles: path.join(process.env.IMOCENTRAL_SITE_DATA, "styles")
},
extensions: [".js", ".jsx"]
},
externals: {
fs: "{}",
tls: "{}",
net: "{}",
console: "{}",
v8: "{}"
}
}
IMOCENTRAL_SITE_DATA是项目文件夹之外的位置。
最佳答案
我在我的 MEAN 堆栈项目中遇到了类似的错误。 app.get 方法最初只有 index.html 文件的路径。当我在 Chrome 开发人员工具控制台选项卡中单击导致错误的文件名时，它显示在查找 js 文件时，它只找到了 index.html 文件:
Chrome dev tools Console Chrome dev tools Sources
我不确定我的解决方案是否与您的相同，因为我没有使用 webpack，而且我也是 MEAN/express 的新手:) 但为了以防万一，最后的答案 here帮我修好了。
即添加到 server.js:
const allowed = [
'.js',
'.css',
'.png',
'.jpg'
];
app.get('*', function(req, res) {
if (allowed.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
res.sendFile(path.resolve(`dist/meantodo/${req.url}`));
} else {
res.sendFile(path.join(__dirname, 'dist/meantodo/index.html'));
}
});
关于javascript - webpack-hot-middleware 不提供任何文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56041129/