I happened to have a chance to upgrade from webpack2 to webpack4 in a project using vue, so I had to use Here's a summary of the errors I've encountered when upgrading webpack and their solutions.
Impression after migrating webpack
The first impressions are that the version of package.json was rewritten before the work started, and then the I thought that I could make it if I did npm install and solved some errors, but it was not so easy.
Because the version of babel-loader was not usable with webpack4 in 6 series, I upgraded it to 8(latest version) skipping version 7. Then, I also had to change the version of babel to 7. Finally that's not a light task.
The other package versions such as file-loader and vue-loader didn't match with the 4 series, so I also needed to update them.
The first thing we did in the migration.
When upgrading, basically, you need to update the version of webpack to 4 first and then I was planning to just keep resolving the errors until the build was successful. It's not very efficient, so I went to the official document first.
Here is something like an explanation of how to migrate from webpack3 -> webpack4. You can find it here: https://webpack.js.org/migrate/4/
The basic policy is to kill errors as they are encountered, but I've already destroyed what I can find in the documentation.
add mode option
In webpack4, you can set the mode options, and if you build in production mode, you can uglify. For more information on how to set it up and how it behaves differently, the following link will help you.
https://webpack.js.org/concepts/mode/
The mode options can be specified with the -m option at the time of webpack's execution, or config it like following code.
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.devtool = 'source-map';
}
if (argv.mode === 'production') {
//... }
}
return config;
};
webpack-cli setup
Since webpack4 has cli as webpack-cli, so I've also installed it.
I also installed it.
npm install -D webpack-cli
Remove Unnecessary Plug-ins
The following four plugins are the default for production mode in v4.
* NoEmitOnErrorsPlugin
* ModuleConcatenationPlugin
* DefinePlugin
* UglifyJsPlugn
This is the development mode default
* NamedModulesPlugin
The next two are deprecated and removed
* NoErrorsPlugin
* NewWatchingPlugin
So, if this plugin is included in your project's webpack.config.js, you should remove it.
Errors that appeared after the upgrade and their countermeasures.
As I wrote earlier, read the migration instructions and remove what I could destroy first so next I needed to fight against the unknown errors.
Cannot read property 'fileLoader' of undefined
It seems that the version of file-loader was simply too old. It was throwing up an error per leaflet.
https://github.com/tcoopman/image-webpack-loader/issues/153
npm install file-loader@[latest version]
TypeError: Cannot read property 'stylus' of undefined
https://github.com/shama/stylus-loader/issues/189
https://github.com/shama/stylus-loader/pull/190/files
A minor version of the stylus-loader had become an error with only 1 small version. It's solved by updating to 3.0.2.
Parse error in dynamic import.
When I built it, there was a parse error in the dynamic import. The project uses this preset-stage-2. It was already migrated it while following document, but it didn't work.
https://github.com/babel/babel/blob/master/packages/babel-preset-stage-2/README.md
Here's the solution, and it's in the
https://github.com/webpack/webpack/issues/8656
There are some posts that say it worked when I downgraded to wepback 4.28. It seems like last resolution, and if you read on as if there's a better way, webpack relies on acorn@^6.05 It seems to need to be installed.
Furthermore, the webpack relies on acorn, acorn-dynamic-import and I needed to dedupe like this
npm dedupe
It seemed to be an error because each one did not reference the same version.
https://github.com/webpack/webpack/issues/8656#issuecomment-456010969 ...
For now.
npm install -D acorn@^6.0.6
npm dedupe
Then it worked.
Cannot read property 'vue' of undefined
https://github.com/vuejs/vue-loader/issues/1177
Upgraded this because more than vue-loader@14.2.2 is required to webapck 4.
Cannot read property 'context' of undefined
Now they want me to update the css-loader
The answer says that ^0.28.11 is fine, but if you can build it with no problems, then the newer version is better, so I upgraded to 1.xx.
WARNING erupts on build.
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. inferred.
I started to see this kind of WARNING spewing out during the build, so I looked it up and this is what I found
https://github.com/rails/webpacker/issues/1734 ...
I was told to give it to vue-loader v15. Though I couldn't get rid of the feeling that "I just updated it to 14 just now". However, there was no way so I upgraded to a new version.
Click here to see how to upgrade.
https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes
In my project, this is how I add plug-ins and
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}
I did the pug and css settings as described in the documentation and I was able to build it with no problems.
Summary
I have introduced the errors and its solutions in the upgrade to webpack4. I wrote a quick note about giving it to v15, but I was usually stuck in it for a couple of hours.
The whole time I assumed that "I can't parse the pug!" However, it took me a while to realize that I hadn't been able to load the stylus, which was a horrible mistake. I wasted a lot of time.
When the version up is skipped, it becomes hard to skip it after. If other libraries are not supported, or it will need version-up like domino. It's not easy. If you focus on only development, version up and maintenance of the environment will be neglected. If you can create a team or system to be able to upgrade immediately when one person notices, it would be better to manage the project in a peaceful way.
Well then. Thank you for reading.