我按照
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
是项目文件夹外的位置。