It uses browserify internally, but the
gulpfile is really messy and I will try to migrate it to webpack build which I’ve been avoided.
And I’ve found the key points to use Webpack and leave a note.
You should check your package versions and each document because the usage may differ per version of package.
In my experiment, I use the following versions:
- webpack v4.41.5
- webpack-cli v3.3.10
- babel-loader v8.0.6
- uglifyjs-webpack-plugin v2.2.0
- vue-loader v15.8.3
For most people, (IMO) this loader settings can be a demon’s gate (meaning a hard part to start with). The usage of it has changed from v7 (Upgrade to Babel 7 · Babel) and some says a slightly different things because of this change. So you need to translate the settings when you google.
Normally, babel’s settings can be put in
"babel" key in
package.json (Config Files · Babel), but you can also do it in
webpack.config.js directly. I tried a little, the
webpack.config.js settings is prior to normal babel setting files.
For the target browsers, you can use browserslist. This package (settings) can be shared with other build tools like Autoprefixer and postcss-preset-env, etc. You write this settings in
"browserslist" key in
I think it’s okay to set up
browserslist to extract ES5 compatible code (for support IE11), there are babel plugins like @babel/plugin-transform-runtime or @babel/plugin-transform-arrow-functions.
The usage of
@babel/plugin-transform-runtime is a bit hard and you should see the documentation when you need to use it.
This is mainly used to minify bundles (just my understanding).
If you fail minify process, your extracted code is not ES5 compatible because this package supports ES5 not ES6 nor later. If you don’t need to support ES5, you can use TerserWebpackPlugin | webpack instead.
If you don’t use Vue.js for your project, you skip this part.
From the v13, you have to change code of CommonJS module system
require. (Release v13.0.0 · vuejs/vue-loader)
// before v13 const MyButton = require('./MyButton.vue'); // v13~ const MyButton = require('./MyButton.vue').default;
This is ridiculous and you should use ES6 module system (
import/export) for the target code of webpack.
It also changed from v14, see Migrating from v14 | Vue Loader.
This page is so useful to learn REAL webpack usage for beginners like me :)
When you start a new project, you should avoid writing
webpack.config.js directly as much as possible because you can use
I’m not familiar with modern front-end and if you find any mistakes in this post, please tell me on twitter!