{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack/issues/6767","repository_url":"https://api.github.com/repos/webpack/webpack","labels_url":"https://api.github.com/repos/webpack/webpack/issues/6767/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack/issues/6767/comments","events_url":"https://api.github.com/repos/webpack/webpack/issues/6767/events","html_url":"https://github.com/webpack/webpack/issues/6767","id":305580147,"number":6767,"title":"Webpack 4 hot rebuild time twice as slow","user":{"login":"drewjenkins","id":5521743,"avatar_url":"https://avatars1.githubusercontent.com/u/5521743?v=4","gravatar_id":"","url":"https://api.github.com/users/drewjenkins","html_url":"https://github.com/drewjenkins","followers_url":"https://api.github.com/users/drewjenkins/followers","following_url":"https://api.github.com/users/drewjenkins/following{/other_user}","gists_url":"https://api.github.com/users/drewjenkins/gists{/gist_id}","starred_url":"https://api.github.com/users/drewjenkins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/drewjenkins/subscriptions","organizations_url":"https://api.github.com/users/drewjenkins/orgs","repos_url":"https://api.github.com/users/drewjenkins/repos","events_url":"https://api.github.com/users/drewjenkins/events{/privacy}","received_events_url":"https://api.github.com/users/drewjenkins/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":29,"created_at":"2018-03-15T14:39:46Z","updated_at":"2018-05-15T09:26:13Z","closed_at":null,"author_association":"NONE","body":"Originally posted this issue on webpack-dev-server's repo, but was told nearly all of HMR is handled by Webpack itself, so I am moving that issue over here.\r\n\r\n* Operating System: Mac OS High Sierra\r\n* Node Version: 8.10.0\r\n* NPM Version: 5.6.0\r\n* webpack Version: 4.1.1\r\n* webpack-dev-server Version: 3.1.1\r\n\r\n- [x] This is a **bug**\r\n- [ ] This is a **modification** request\r\n\r\n### Code\r\n\r\nNote that the webpack file I posted isn't exactly what we have, but anything removed was just company info, me merging a common webpack file with our dev one to produce a single code snippet, and removing some unrelated/redundant info (e.g. multiple templates with similar content).\r\n\r\n```js\r\n  // webpack.config.js\r\nconst webpack = require('webpack');\r\nconst merge = require('webpack-merge');\r\nconst config = require('./webpack.common.config.js');\r\nconst Jarvis = require('webpack-jarvis');\r\n\r\nmodule.exports = merge(config, {\r\n  mode: 'development',\r\n  devtool: 'cheap-module-eval-source-map',\r\n  output: {\r\n    publicPath: '/',\r\n    filename: '[name]-[hash].js',\r\n    crossOriginLoading: 'anonymous',\r\n    chunkFilename: '[name]-[hash].js'\r\n  },\r\n  optimization: {\r\n    noEmitOnErrors: true,\r\n    namedModules: true,\r\n  },\r\n  plugins: [\r\n    new CopyWebpackPlugin([{\r\n      from: 'app/assets/images/favicon/',\r\n      to: 'favicon/',\r\n    }]),\r\n    new CopyWebpackPlugin([{\r\n      from: 'app/assets/images/square/logo.png',\r\n      to: 'logo.png',\r\n    }]),\r\n    new ExtractTextPlugin({\r\n      filename: '[name]-styles-[contenthash].css',\r\n      allChunks: true,\r\n    }),\r\n    new DeterministicHash(),\r\n    new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/),\r\n    new HtmlWebpackPlugin({\r\n      template: 'templates/index.ejs',\r\n      filename: 'index.html',\r\n      inject: false,\r\n      chunks: ['common', 'main'],\r\n      appleTouchIconSizes: [57, 72, 114, 120, 144, 152],\r\n    }),\r\n    new Jarvis({port: 7003}),\r\n    new webpack.HotModuleReplacementPlugin(),\r\n    new webpack.DefinePlugin({\r\n      _DEVELOPMENT_: true,\r\n    })\r\n  ],\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.(otf|ttf|woff|woff2|png|jpg|svg|mp3|wav|aff|dic)$/,\r\n        use: [\r\n          {\r\n            loader: 'file-loader',\r\n            options: {\r\n              name: 'assets/[name]-[sha1:hash:hex:8].[ext]'\r\n            },\r\n          },\r\n        ]\r\n      },\r\n      {\r\n        test: /\\.s?css$/,\r\n        use: ExtractTextPlugin.extract({\r\n          fallback: 'style-loader',\r\n          use: [\r\n            'css-loader',\r\n            {\r\n              loader: 'postcss-loader',\r\n              options: {\r\n                plugins: () => [\r\n                  require('precss'),\r\n                  require('autoprefixer'),\r\n                ]\r\n              }\r\n            },\r\n            'sass-loader'\r\n          ]\r\n        }),\r\n      },\r\n      {\r\n        test: /\\.jsx?$/,\r\n        use: ['babel-loader'],\r\n      },\r\n    ]\r\n  },\r\n  entry: {\r\n    main: [\r\n      'babel-polyfill',\r\n      'react-hot-loader/patch',\r\n      'webpack/hot/only-dev-server',\r\n      'webpack-dev-server/client?https://0.0.0.0:7001',\r\n      './app/main.js',\r\n    ],\r\n  }\r\n});\r\n\r\n```\r\n\r\n```js\r\n  // dev-server.js\r\nconst path = require('path');\r\nconst fs = require('fs');\r\nconst webpack = require('webpack');\r\nconst WebpackDevServer = require('webpack-dev-server');\r\nconst config = require('./webpack.devconfig');\r\nconst ssl = require('./devssl');\r\n\r\nnew WebpackDevServer(webpack(config), {\r\n  publicPath: config.output.publicPath,\r\n  headers: {'Access-Control-Allow-Origin': '*'},\r\n  hot: true,\r\n  https: true,\r\n  clientLogLevel: 'error',\r\n  cert: ssl.cert,\r\n  overlay: true,\r\n  key: ssl.key,\r\n  historyApiFallback: true,\r\n  disableHostCheck: true,\r\n  watchOptions: {\r\n    ignored: /\\/node_modules\\/.*/,\r\n  },\r\n  stats: {\r\n    assets: false,\r\n    cached: false,\r\n    cachedAssets: false,\r\n    children: false,\r\n    chunks: false,\r\n    chunkModules: false,\r\n    chunkOrigins: false,\r\n    colors: true,\r\n    depth: false,\r\n    entrypoints: true,\r\n    excludeAssets: /app\\/assets/,\r\n    hash: false,\r\n    maxModules: 15,\r\n    modules: false,\r\n    performance: true,\r\n    reasons: false,\r\n    source: false,\r\n    timings: true,\r\n    version: false,\r\n    warnings: true,\r\n  },\r\n}).listen(7001, '0.0.0.0', function(err, result) {\r\n  console.log(`Serving chunks at path ${config.output.publicPath}`);\r\n});\r\n```\r\n\r\n### Expected Behavior\r\nSimilar, if not faster HMR\r\n\r\n### Actual Behavior\r\nHot reload time increased from ~5s to ~10s when upgrading from Webpack 3 to Webpack 4.  \r\n\r\n### For Bugs; How can we reproduce the behavior?\r\nUnsure if it reproduces in every case, but in our case we have a large webapp that spits out multiple entry points, with sass processing, along with a lot of other webpack features."},"comment":{"url":"https://api.github.com/repos/webpack/webpack/issues/comments/389102998","html_url":"https://github.com/webpack/webpack/issues/6767#issuecomment-389102998","issue_url":"https://api.github.com/repos/webpack/webpack/issues/6767","id":389102998,"user":{"login":"p3x-robot","id":28588124,"avatar_url":"https://avatars0.githubusercontent.com/u/28588124?v=4","gravatar_id":"","url":"https://api.github.com/users/p3x-robot","html_url":"https://github.com/p3x-robot","followers_url":"https://api.github.com/users/p3x-robot/followers","following_url":"https://api.github.com/users/p3x-robot/following{/other_user}","gists_url":"https://api.github.com/users/p3x-robot/gists{/gist_id}","starred_url":"https://api.github.com/users/p3x-robot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/p3x-robot/subscriptions","organizations_url":"https://api.github.com/users/p3x-robot/orgs","repos_url":"https://api.github.com/users/p3x-robot/repos","events_url":"https://api.github.com/users/p3x-robot/events{/privacy}","received_events_url":"https://api.github.com/users/p3x-robot/received_events","type":"User","site_admin":false},"created_at":"2018-05-15T09:26:13Z","updated_at":"2018-05-15T09:26:13Z","author_association":"NONE","body":"i dislike typesciprt. i tried it, angularjs is the best for me.\r\ntypescript is so slow, oh my god, i don't want java in javascript => typescript.\r\ni like js and c++, it can do everything you want.\r\nsure,  you think like this :-1: \r\n\r\nsee https://pages.corifeus.com , based on typescript angular 6.\r\nto work on the code and see my browser, it has to compile everything, when js can do everything i need.\r\nthis is my last angular 6 system.\r\nonce i have 10ghz cpu and 32 core and it can split compiling using multiple cores/hyperthreads, ok!\r\n\r\nor if they have a typescript c++ based interpreter, fine, still `JS` is the functional best for me!\r\n\r\nbut my workstation, with 8 hyperthreads, 4.5ghz, 32 GB ram 2133 mhz and compiling looks like recompile everything for 1 line. \r\nhate it!!!\r\n\r\n:-1: "}}
{"actor":{"display_login":"p3x-robot"}}