I followed the tutorial from the GitHub page of webpack-hot-middleware and I just can't make it work. I receive in the browser the next: index.bundle.js:1 Uncaught SyntaxError: Unexpected token < because can't find the file. I know that webpack-dev-middleware serve the file in memory, but I don't know how to make it work.
Here is the 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}`);
});
And here it the 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>
And in final here it is the 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 is a location outside of project folder.
from webpack-hot-middleware not serving any file
No comments:
Post a Comment