Question

我在多个条目中使用webpack-hot-middleware，我在插件配置中给每个条目一个路径，我可以在浏览器控制台[HMR] connected中看到。当我更新我的文件时，我看到了webpack重建，但从未重新加载。

我的一些配置如下所示：

const devMiddleware = require('webpack-dev-middleware');
const hotMiddleware = require('webpack-hot-middleware');
const app = express();
const webpackConfig = require(`../configs/webpack.dev.conf.js`);

dirs.forEach(function(dir, index) {
    let _config = new webpackConfig(dir);

    app.use(devMiddleware(webpack(_config), {
        publicPath: _config.output.publicPath
    }));
    app.use(hotMiddleware(webpack(_config), {
        path: `/${dir}/__webpack_hmr`
    }));
});

function getDirs(_dir) {
    return fs.readdirSync(_dir)
        .filter((_file) => {
            return fs.statSync(path.join(_dir, _file)).isDirectory()
        })
}

在我的webpack.dev.conf.js：

module.exports = function (dir) {
    /* some other config here */
    webEntry.push(`webpack-hot-middleware/client?reload=true&path=/${dir}/__webpack_hmr`);

    const webConfig = {
        entry: webEntry,
        output: {
            path: helper.rootNode('./dist', dir),
            filename: '[name].web.js',
            publicPath: `/${dir}`
        },
    /* some other config here */
    }

    return webConfig;
}

我还在插件列表中添加了new webpack.HotModuleReplacementPlugin()。

每次我更改代码时，我都会看到webpack-dev-middleware重新编译，但在我的浏览器控制台[HMR] connected之后的更改后，我再也看不到重新加载了。我在我的vue项目中使用它，每个组件或视图都是单文件组件。它在vue-loader的帮助下正常工作。

我的配置有什么问题吗？感谢您的帮助。

如何使用vue在多个条目中使用webpack-hot-middleware

0 个答案: