webpack-hot-middleware未提供任何文件服务

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

1个回答

1
我在我的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'));
   }
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接