Upgrade webpack and npm deps #485
Conversation
…, and explicitly passed it to the build cmd as it wasn't being picked up automatically.
|
Closes #472 |
|
cc: @Dzoukr would you be able to have a look at this config given your recent work? |
|
Fwiw I took the SAFEr template as my guide so should look pretty familiar. I think we might be able to remove the The only thing that stumped me for a few minutes was that the webpack config was no longer picked up automatically, but if I passed it in in the same way we do to for the tests then it worked fine. |
|
Also, I did spot |
Looks good to me, but be aware that I am far from being good at this. I rather randomly change things and see if it works 😄 |
|
Hi @theimowski, earlier today @isaacabraham asked me to see if you could take a look at the failing pipelines here? As I mention above, perhaps the Travis machine needs an npm update? If there is anything I can do to help just shout :) Cheers! |
|
The Azure Pipelines seem to be failing due to different wording in new version of webpack. The tests look for a specified phrase in stdout which seems to be now |
|
Just updated the stdOut phrase in the tests so hopefully that will sort Devops out. Also just found this thread which suggests the Travis failure is a node issue as I thought, so I will see if I can get that updated too. |
|
Node version seems update seemed to work, now both pipelines are failing on webpack being passed an unrecognised '-p' option. I'll see if I can fix that too. |
Content/default/webpack.config.js
Outdated
| @@ -80,7 +86,7 @@ module.exports = { | |||
| plugins: isProduction ? | |||
| commonPlugins.concat([ | |||
| new MiniCssExtractPlugin({ filename: 'style.[name].[hash].css' }), | |||
| new CopyWebpackPlugin({ patterns: [{ from: resolve(CONFIG.assetsDir) }]}), | |||
| new CopyWebpackPlugin({ patterns: [{ from: resolve(CONFIG.assetsDir) }] }), | |||
| ]) | |||
| : commonPlugins.concat([ | |||
| new webpack.HotModuleReplacementPlugin(), | |||
There was a problem hiding this comment.
Not completely necessary but since we already have hot: true in the devServer this plugin will be added by default, and we could remove it (check the tip inside the docs https://webpack.js.org/configuration/dev-server/#devserverhot)
… to the docs it was a shortcut for '--optimize-minimize --define process.env.NODE_ENV="production"'. We already set the node env in our webpack file, and webpack minimises prod code by default since v4.
… options have hot:true
|
Ok @isaacabraham, all checks seem to be passing now |
| host: '0.0.0.0', | ||
| port: 8080, | ||
| inline: true, | ||
| proxy: { |
There was a problem hiding this comment.
I'm getting following error when testing minimal template:
<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/hello to http://localhost:8085/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
maybe dev server proxy configuration changed format with new WebPack version?
This updates all three webpack files (standard, test and minimal) to Webpack 5 format. It updates the npm dependencies to match. I also found that I had to pass the config explicitly to the fable command in the Run target.
Note - when testing I found that the tests are currently broken due to #465. I have submitted a fix for this as a separate PR, #484