Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use in multiple entries with vue #291

Open
mosquito1994 opened this issue Mar 19, 2018 · 2 comments
Open

Use in multiple entries with vue #291

mosquito1994 opened this issue Mar 19, 2018 · 2 comments

Comments

@mosquito1994
Copy link

I'm using webpack-hot-middleware in multiple entries, I give each entry a path in the plugin config and I can see in the browser console [HMR] connected. When I update my file I see the webpack rebuild but never reload at all.

Some of my config looks like this:

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()
        })
}

And in my 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;
}

Also I add new webpack.HotModuleReplacementPlugin() in my plugin list.

It seems everything works well except that I can never see a reload after my changes. I'm using this in my vue project. Is it anything wrong with my config ? Thanks for your help in advance.

@pearofducks
Copy link

pearofducks commented Mar 25, 2018

The edited version of your config might be missing something important. F.ex you've edited out that you import webpack somewhere. :)

That being said, have you tried:

dirs.forEach(function(dir, index) {
    const _config = new webpackConfig(dir);
    const compiler = webpack(_config)
    app.use(devMiddleware(compiler, {
        publicPath: _config.output.publicPath
    }));
    app.use(hotMiddleware(compiler, {
        path: `/${dir}/__webpack_hmr`
    }));
});

In general, it's much better to provide a working reproduction instead of copying and pastings bits and pieces - and kinda bad form to file an issue for tech support instead of asking StackOverflow. ;)

@mosquito1994
Copy link
Author

https://github.com/mosquito1994/testWeex

Here I've upload the project. The webpack config is configs/webpack.dev.conf.js, and lauched in scripts/dev.js. Hope someone can help me figure out the point here. Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants