Webpack compile twice when js file changed

[garyxuehong]

Hi,

When I changed a js file, the webpack dev server run the process twice. Do you know how to prevent this?

my config is like:

                    test: /\.jsx?$/,
                    include: {
                        test: [
                            appPath.src.root
                        ]
                    },
                    enforce: 'pre',
                    loader: 'prettier-loader',
                    options: {
                        printWidth: 80,               // Specify the length of line that the printer will wrap on.
                        tabWidth: 4,                  // Specify the number of spaces per indentation-level.
                        useTabs: false,               // Indent lines with tabs instead of spaces.
                        semi: true                   // Print semicolons at the ends of statements.
                    }
                },
                {
                    test: /\.jsx?$/,
                    exclude: {
                        test: appPath.dep.nodeModules
                    },
                    loader: "babel-loader",
                    options: babelConfig({})
                },

webpack output this:

webpack: Compiling...
Hash: 861b7b616fa7df682818
Version: webpack 2.6.1
Time: 192ms
        Asset     Size  Chunks         Chunk Names
app.bundle.js  4.58 MB       0  [big]  main
chunk    {0} app.bundle.js (main) 1.63 MB [entry]
 [../node_modules/react-hot-loader/lib/patch.js] ../~/react-hot-loader/lib/patch.js 214 bytes {0}
 [../node_modules/react-hot-loader/patch.js] ../~/react-hot-loader/patch.js 41 bytes {0}
 [../node_modules/react/react.js] ../~/react/react.js 56 bytes {0}
 [../node_modules/strip-ansi/index.js] ../~/strip-ansi/index.js 163 bytes {0}
 [../node_modules/url/url.js] ../~/url/url.js 25.8 kB {0}
 [../node_modules/webpack-dev-server/client/index.js?http:/localhost:8080] ../~/webpack-dev-server/client?http://localhost:8080/ 6.56 kB {0}
 [../node_modules/webpack-dev-server/client/overlay.js] ../~/webpack-dev-server/client/overlay.js 4.04 kB {0}
 [../node_modules/webpack-dev-server/client/socket.js] ../~/webpack-dev-server/client/socket.js 1.04 kB {0}
 [../node_modules/webpack/buildin/harmony-module.js] ../~/webpack/buildin/harmony-module.js 753 bytes {0}
    [0] multi webpack-dev-server/client?http://localhost:8080/ webpack/hot/dev-server react-hot-loader/patch ./src/index.js 64 bytes {0}
 [../node_modules/webpack/hot/dev-server.js] ../~/webpack/hot/dev-server.js 2.21 kB {0}
 [../node_modules/webpack/hot/emitter.js] ../~/webpack/hot/emitter.js 77 bytes {0}
 [../node_modules/webpack/hot/log-apply-result.js] ../~/webpack/hot/log-apply-result.js 1.2 kB {0}
 [./src/app.js] ./src/app.js 892 bytes {0} [built]
 [./src/index.js] ./src/index.js 787 bytes {0}
     + 446 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 861b7b616fa7df682818
Version: webpack 2.6.1
Time: 89ms
        Asset     Size  Chunks         Chunk Names
app.bundle.js  4.58 MB       0  [big]  main
chunk    {0} app.bundle.js (main) 1.63 MB [entry]
 [../node_modules/react-hot-loader/lib/patch.js] ../~/react-hot-loader/lib/patch.js 214 bytes {0}
 [../node_modules/react-hot-loader/patch.js] ../~/react-hot-loader/patch.js 41 bytes {0}
 [../node_modules/react/react.js] ../~/react/react.js 56 bytes {0}
 [../node_modules/strip-ansi/index.js] ../~/strip-ansi/index.js 163 bytes {0}
 [../node_modules/url/url.js] ../~/url/url.js 25.8 kB {0}
 [../node_modules/webpack-dev-server/client/index.js?http:/localhost:8080] ../~/webpack-dev-server/client?http://localhost:8080/ 6.56 kB {0}
 [../node_modules/webpack-dev-server/client/overlay.js] ../~/webpack-dev-server/client/overlay.js 4.04 kB {0}
 [../node_modules/webpack-dev-server/client/socket.js] ../~/webpack-dev-server/client/socket.js 1.04 kB {0}
 [../node_modules/webpack/buildin/harmony-module.js] ../~/webpack/buildin/harmony-module.js 753 bytes {0}
    [0] multi webpack-dev-server/client?http://localhost:8080/ webpack/hot/dev-server react-hot-loader/patch ./src/index.js 64 bytes {0}
 [../node_modules/webpack/hot/dev-server.js] ../~/webpack/hot/dev-server.js 2.21 kB {0}
 [../node_modules/webpack/hot/emitter.js] ../~/webpack/hot/emitter.js 77 bytes {0}
 [../node_modules/webpack/hot/log-apply-result.js] ../~/webpack/hot/log-apply-result.js 1.2 kB {0}
 [./src/app.js] ./src/app.js 892 bytes {0} [built]
 [./src/index.js] ./src/index.js 787 bytes {0}
     + 446 hidden modules
webpack: Compiled successfully.

[iamolegga]

Hi, sorry for late, found this issue just now :) I'll try to do something with it

[iamolegga]

I'll try to figure out the problem:
user save changes to file -> here comes first compilation
if loader sees that file should be formatted, it overwrites the file -> here comes next compilation

Seems like it's not possible to solve this problem by only loader, according to loader api you can not prevent already started compilation.

But, I think this is where we can create plugin, that prevents second compilation.
And this is what you will add only to your dev config of webpack.

Need more time to solve this problem.

[garyxuehong]

Thank you for spending time investigate it. I am actually totally happy to have it compiled twice. Seeing multiple green 'success' displayed on screen makes me feel that my code is rock solid :)

[iamolegga]

Webpack team add new documentation on loaders api, so it seems like .pitch should help to solve this problen

I'll take a look in next few days

[enzoferey]

How the research is going ? Really looking forward it :)

Amazing loader btw, saved me a lot of headaches with pre commit setup inside Docker 👍

[iamolegga]

Sorry for delay, I could not find a lot of time for solving this problem before.

But I have time on next week, so I think somehow this will be done.

[enzoferey]

Hi ! How is it going ? Looking forward it 😄

[iamolegga]

Hi, sorry for so late, it's done in watch-mode-fix branch, but I want to be sure with this, and I would like to take just a couple of days for more testing before merge it to master

[Deadly0]

@iamolegga hi, will you merge the fix? Maybe publish beta version with the fix to npm?

[iamolegga]

@Deadly0 I tested this, but had some issues with webpack 4, so that's why I didn't merge it yet. Now I'm on vacation, and I have not access to npm, so more time is required

[sola92]

@iamolegga any luck with this?

[dsktschy]

Any solution for this?

[iamolegga]

Hi everyone, first of all, I'm so sorry for making you waiting so much time for solving this.

Last 2-3 days I was working only on this problem trying to solve this old bug. I've read all the webpack API docs, I've tried different ways, but no luck. With current webpack API it seems like it's not solvable.

More over webpack maintainers saying that loaders should not do things like this loader does (webpack/webpack#9763) 🤷‍♂️

I've looked at other similat projects, but no one has solution.

So I'm going to add this as knowing issue in docs, and closing it for now.

Sorry

[madnilo]

Anyone found a good alternative to this?
I am using the package in my project, and wondering what else is out there.