webpack-hot-middleware не обслуживает ни один файл - PullRequest
3 голосов
/ 08 мая 2019

Я следовал руководству со страницы GitHub webpack-hot-middleware, и я просто не могу заставить его работать. Я получаю в браузере следующее: index.bundle.js:1 Uncaught SyntaxError: Unexpected token <, потому что не могу найти файл. Я знаю, что webpack-dev-middleware хранит файл в памяти, но я не знаю, как заставить его работать.

Вот сервер.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 голос
/ 18 мая 2019

Я получил похожую ошибку в моем проекте стека MEAN. Изначально у метода app.get был только путь к файлу index.html. Когда я щелкнул по имени файла, вызвавшему ошибку на вкладке Консоль инструментов разработчика Chrome, он показал, что при поиске js-файлов он обнаружил только файл index.html:

Консоль Chrome Dev Tools Инструменты разработчика Chrome. Источники

Я не уверен, будет ли мое решение таким же, как у вас, потому что я не использую webpack, и я также новичок в MEAN / express :), но на всякий случай это поможет, последний ответ здесь исправил это для меня.

т.е. Добавление в 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'));
   }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...