Webpack 3.0+ Libraries Bundle

[robbieprevost]

There are some changes you need to make if you're using WebPack 3.0+

For webpack.config.js, I had to make the file look like this:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        app: './src/App.jsx',
        vendor:['react', 'react-dom', 'whatwg-fetch', 'babel-polyfill'],
    },
    output: {
        path: path.join(__dirname, './static'),
        filename: "[name].bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["app",'vendor'],
            minChunks: Infinity
        })
    ],
    module: {
        rules:[
            {
                test:/\.jsx$/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react','es2015']
                    }
                }
            },
         ]
     },
 };

[arrmixer]

hey nice man! cheers! which version webpack-dev-server are you using? 2.5.1?

[robbieprevost]

Hey arrmixer, I just moved on to the webpack-dev-server section and I just used npm to install it and it installed version 2.5.1. I got it up and running on port 8000, but, for some reason, when I try to use the --hot --inline flags, they don't seem to do anything. The dev server runs, but the hot module replacement doesn't run. It runs like I didn't include those flags at all. Did you come across this when using the --hot --inline flags? If so, any tips on how to fix it?

[arrmixer]

did you get the page up at least or is it blank? I thought you solve it already! lol

On Jul 13, 2017, at 3:43 PM, Robbie Prevost notifications@github.com wrote:

Hey arrmixer, I just moved on to the webpack-dev-server section and I just used npm to install it and it installed version 2.5.1. I got it up and running on port 8000, but, for some reason, when I try to use the --hot --inline flags, they don't seem to do anything. The dev server runs, but the hot module replacement doesn't run. It runs like I didn't include those flags at all. Did you come across this when using the --hot --inline flags? If so, any tips on how to fix it?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vasansr/pro-mern-stack/issues/17#issuecomment-315181721, or mute the thread https://github.com/notifications/unsubscribe-auth/AH3jneFM7B7uRYdsnE8vxwHcFDWM1Axvks5sNnNcgaJpZM4OTEST.

[robbieprevost]

The dev-server runs on port 8000, and i'm getting the issue list to show up like it's running on port 3000. The --hot --inline flags just don't do anything.

[arrmixer]

oh okay got it. try to change something on the client code it should refresh right?

[robbieprevost]

There's no error. It runs fine, just nothing for the HMR section. Here's what I'm getting in the console:

D:\Pro-MERN-Stack>npm run watch

pro-mern-stack@1.0.0 watch D:\Pro-MERN-Stack webpack-dev-server --hot --inline

Project is running at http://localhost:8000/ webpack output is served from / Content not from webpack is served from D:\Pro-MERN-Stack\static Hash: **** Version: webpack 3.1.0 Time: 3648ms Asset Size Chunks Chunk Names app.bundle.js 15.2 kB 0 [emitted] app vendor.bundle.js 1.35 MB 1 [emitted] [big] vendor [10] (webpack)/buildin/global.js 509 bytes {1} [built] [65] ./node_modules/react/lib/React.js 5.08 kB {1} [built] [77] ./node_modules/react/react.js 56 bytes {1} [built] [153] (webpack)-dev-server/client?http://localhost:8000 5.59 kB {1} [built] [171] (webpack)/hot/dev-server.js 1.61 kB {1} [built] [172] (webpack)/hot/log.js 429 bytes {1} [built] [180] ./node_modules/react-dom/index.js 59 bytes {1} [built] [206] ./node_modules/whatwg-fetch/fetch.js 12.7 kB {1} [built] [235] multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server . /src/App.jsx 52 bytes {0} [built] [236] ./node_modules/url/url.js 23.3 kB {1} [built] [242] ./node_modules/strip-ansi/index.js 161 bytes {1} [built] [283] ./src/App.jsx 631 bytes {0} [built] [387] multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server r eact react-dom whatwg-fetch babel-polyfill 88 bytes {1} [built] [388] ./node_modules/babel-polyfill/lib/index.js 833 bytes {1} [built] [389] ./node_modules/core-js/shim.js 7.38 kB {1} [built]

• 556 hidden modules webpack: Compiled successfully.

[robbieprevost]

I don't get the:

[HMR] Waiting for update signal from WDS... [WDS] Hot Module Replacement enabled.

Also, when I change the client-side code, the browser doesn't do anything and it think it's supposed to refresh with the new content according to the book.

[arrmixer]

exactly, but you at least got the same screen on both ports right?

[robbieprevost]

Yeah, which is good. It's just not reloading...

It might be this line: pro-mern-stack@1.0.0 watch D:\Pro-MERN-Stack

Maybe I need to get it to watch pro-mern-stack@1.0.0 watch D:\Pro-MERN-Stack\static\

But then it won't refresh if I change the server code... I dunno. I'm going to tinker around with it some more.

[arrmixer]

yeah but should be taken care of in your webpack.config.js file right?

[robbieprevost]

yeah, it's working now and it was probably working before for the jsx files. I was trying to test it by adding an

Test

in index.html and it recompiled, but I had to refresh the page to see the changes.

Now, i just tried editing IssueFilter.jsx file and it did a hot reload. So, I guess it just does a hot reload for the react components...

I guess that's good to know... Anyway, thanks for helping me figure it out.

[arrmixer]

awesome! Yeah you're right I guessing because all the client side code is actually done in .jsx.

[arrmixer]

hey I just rebuild the json package with all the latest dependencies your webpack config work. Thanks!