background

Before vuE-Cli3 was released, the VUE project built with Vue-Cli2 was based on WebPack3. x. With the iteration of the project, the functions and files gradually increased, and the packaging time increased from 4.5 minutes at the beginning to 17 minutes at the longest time.

Due to the use of TS, the type check is required every time the TS-Loader is packaged, resulting in a sharp increase in time. After the transpileOnly option was set to true, the packaging time was reduced to 1 minute.

As time went on, the project dependency fell behind and the packaging time reached 2.5 minutes, which coincided with the improvement in packaging performance of WebPackage 4, so here is the update log:

start

Overall idea:

  1. Upgrade project dependencies
  2. Run through the development environment package
  3. Run through the build environment packaging

Upgrade project dependencies

At the beginning of the project, the idea of dependency upgrade is to upgrade webpack to the latest version, and then gradually upgrade loader, Plugin, Babel and other dependencies. However, based on the previous experience of upgrading Webpack4 in other projects, we found that the gradual upgrade would spend part of the time on the problem of old and new dependencies, so we decided to be radical and use NCU to upgrade the project dependencies contained in package.json to the latest version at one time. Considering the uncertainty, You can optionally modify package.json to not upgrade dependencies such as those with major version changes (eg: 0.x.x => 1.x.x).

# installation of NPM - check - updates
npm i -g npm-check-updates

# Check the dependencies of the project against the latest stable version and make a list (beta versions may not be listed)
ncu

# Update the version numbers of dependencies contained in 'package.json' to the latest
ncu -u

Delete old dependencies and install new dependencies
rm -rf node_modules
rm package-lock.json
npm i
Copy the code

Run through the development environment package

npm run dev
Copy the code

Problems encountered during operation:

  1. TypeError: proxyMiddleware is not a function

    Error log:

    /Users/yourProjectPath/build/dev-server.js:47 app.use(proxyMiddleware(options.filter || context, options)); ^ TypeError: proxyMiddleware is not a function at /Users/yourProjectPath/build/dev-server.js:47:11 at Array.forEach (<anonymous>) at Object.<anonymous> (/Users/yourProjectPath/build/dev-server.js:42:25) at Module._compile (module.js:643:30) at Object.Module._extensions.. js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Function.Module.runMain (module.js:684:10) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:608:3Copy the code

    The reason:

    This is caused by http-proxy-middleware upgrading to v1.x:

    - "HTTP proxy -- middleware" : "~ 0.17.3",
+ "HTTP proxy - middleware" : "~ 1.0.3",
Copy the code

    From v1.x onwards, use middleware by actively importing createProxyMiddleware:

    // javascript

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");

const app = express();

app.use(
  "/api",
  createProxyMiddleware({
    target: "http://www.example.org".changeOrigin: true,})); app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
Copy the code

    How to solve:

    Actively import createProxyMiddleware

    - const proxyMiddleware = require('http-proxy-middleware');
+ const { createProxyMiddleware } = require('http-proxy-middleware');
Copy the code

    Change proxyMiddleware to createProxyMiddleware

    - app.use(proxyMiddleware(options.filter || context, options));
+ app.use(createProxyMiddleware(options.filter || context, options));
Copy the code

  2. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

    How to migrate vuE-Loader from V14 to V15

    Error log:

    ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./src/main.ts 2:0-28 45:23-26
@ multi ./build/dev-client ./src/main.ts
Copy the code
    ERROR in ./src/page/supplier/preferential/full-discount/view.vue? vue&type=script&lang=ts& Module not found: Error: Can't resolve '.. /.. /.. /.. /interface/coupon.coupon_code_view' in '/Users/yourProjectPath/src/page/supplier/preferential/full-discount' @ ./src/page/supplier/preferential/full-discount/view.vue? vue&type=script&lang=ts& 19:0-70 @ ./src/page/supplier/preferential/full-discount/view.vue @ ./src/router/supplier/preferential.ts @ ./src/router/supplier/index.ts @ ./src/router/index.ts @ ./src/main.ts @ multi ./build/dev-client ./src/main.tsCopy the code

    The reason:

    After vue-Loader is upgraded to V15.x, the VueLoaderPlugin needs to be used

    How to solve:

    // webpack.base.confg.js
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  // ...
  plugins: [new VueLoaderPlugin()],
};
Copy the code

  3. Component template requires a root element, rather than just text.

    Error log:

    Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: Component template requires a root element, rather than just text. 1 | | 2 | #app | ^^^^ 3 | router-view | ^^^^^^^^^^^^^ @ ./src/App.vue? vue&type=template&id=7ba5bd90&lang=pug& 1:0-238 1:0-238 @ ./src/App.vue @ ./src/main.ts @ multi ./build/dev-client ./src/main.tsCopy the code
    Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

Errors compiling template:

text "div
el-card" outside root element will be ignored.
Copy the code

    The reason:

    Quoted from vue-loader documentation:

    Note that some template loaders export a compiled template function instead of plain HTML, such as pug-loader. To pass the correct content to Vue’s template compiler, you must switch to a loader that outputs normal HTML. For example, to support

    How to solve:

    Pug syntax is used in the project. Due to the upgrade of vue-Loader, pug-plain-loader needs to be introduced

    npm i -D pug-plain-loader
Copy the code
    // webpack.base.confg.js

module.exports = {
  // ...
  module: {
    rules: [
     // ...
      {
        test: /\.pug$/.loader: "pug-plain-loader"}]; }};Copy the code

  4. Cannot find module ‘@babel/core’

    Error log:

    ERROR in ./src/store/mutation/util.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'. at Function.Module._resolveFilename (module.js:538:15) at Function.Module._load (module.js:468:25) at Module.require (module.js:587:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/yourProjectPath/node_modules/babel-loader/lib/index.js:10:11) at Module._compile (module.js:643:30) at Object.Module._extensions.. js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Module.require (module.js:587:17) at require (internal/module.js:11:18) at loadLoader (/Users/yourProjectPath/node_modules/loader-runner/lib/loadLoader.js:18:17) at iteratePitchingLoaders (/Users/yourProjectPath/node_modules/loader-runner/lib/LoaderRunner.js:169:2) at runLoaders (/Users/yourProjectPath/node_modules/loader-runner/lib/LoaderRunner.js:365:2) at NormalModule.doBuild (/Users/yourProjectPath/node_modules/webpack/lib/NormalModule.js:295:3) @ ./src/store/mutation/nav.ts 3:0-48 54:41-63 59:41-63 63:41-63 70:37-59 @ ./src/store/mutation/index.ts @ ./src/store/index.ts @ ./src/main.ts @ multi ./build/dev-client ./src/main.tsCopy the code

    The reason:

    As you can see from the error, babel-loader@8 relies on Babel 7.x (i.e. @babel/core).

    How to solve:

    Unload the Babel – core

    npm un babel-core
Copy the code

    Install @ Babel/core

    npm i -D @babel/core
Copy the code

  5. Cannot read property ‘bindings’ of null

    Error log:

    Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: /Users/yourProjectPath/src/page/image-tag/bus.js: Cannot read property 'bindings' of null at Scope.moveBindingTo (/Users/yourProjectPath/node_modules/@babel/traverse/lib/scope/index.js:926:13) at BlockScoping.updateScopeInfo (/Users/yourProjectPath/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17) at BlockScoping.run (/Users/yourProjectPath/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12) at PluginPass.BlockStatementSwitchStatementProgram (/Users/yourProjectPath/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24) at newFn (/Users/yourProjectPath/node_modules/@babel/traverse/lib/visitors.js:179:21) at NodePath.\_call (/Users/yourProjectPath/node_modules/@babel/traverse/lib/path/context.js:55:20) at NodePath.call (/Users/yourProjectPath/node_modules/@babel/traverse/lib/path/context.js:42:17) at NodePath.visit (/Users/yourProjectPath/node_modules/@babel/traverse/lib/path/context.js:90:31) at TraversalContext.visitQueue (/Users/yourProjectPath/node_modules/@babel/traverse/lib/context.js:112:16) at TraversalContext.visitSingle (/Users/yourProjectPath/node_modules/@babel/traverse/lib/context.js:84:19) at TraversalContext.visit (/Users/yourProjectPath/node_modules/@babel/traverse/lib/context.js:140:19) at Function.traverse.node (/Users/yourProjectPath/node_modules/@babel/traverse/lib/index.js:84:17) at traverse (/Users/yourProjectPath/node_modules/@babel/traverse/lib/index.js:66:12) at transformFile (/Users/yourProjectPath/node_modules/@babel/core/lib/transformation/index.js:107:29) at transformFile.next (<anonymous>)  at run (/Users/yourProjectPath/node_modules/@babel/core/lib/transformation/index.js:35:12)Copy the code

    The reason:

    Since Babel has been upgraded to 7.x,.babelrc is still referencing babel-preset-env for Babel 6.x

    How to solve:

    Uninstall the Babel – preset – env

    npm un babel-preset-env
Copy the code

    Install @ Babel/preset – env

    npm i -D @babel/preset-env
Copy the code

    Remove babel-preset-env from.babelrc and use @babel/preset-env instead

    - { "presets": ["env"] }
+ { "presets": ["@babel/preset-env"] }
Copy the code

  6. this.setDynamic is not a function

    Error log:

    ERROR in ./src/lib/image-drop.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/yourProjectPath/src/lib/image-drop.js: this.setDynamic is not a function
    at PluginPass.pre (/Users/yourProjectPath/node_modules/babel-plugin-transform-runtime/lib/index.js:31:12)
    at transformFile (/Users/yourProjectPath/node_modules/@babel/core/lib/transformation/index.js:96:27)
    at transformFile.next (<anonymous>)
    at run (/Users/yourProjectPath/node_modules/@babel/core/lib/transformation/index.js:35:12)
    at run.next (<anonymous>)
    at Function.transform (/Users/yourProjectPath/node_modules/@babel/core/lib/transform.js:27:41)
    at transform.next (<anonymous>)
    at step (/Users/yourProjectPath/node_modules/gensync/index.js:254:32)
    at /Users/yourProjectPath/node_modules/gensync/index.js:266:13
    at async.call.result.err.err (/Users/yourProjectPath/node_modules/gensync/index.js:216:11)
    at /Users/yourProjectPath/node_modules/gensync/index.js:184:28
    at /Users/yourProjectPath/node_modules/@babel/core/lib/gensync-utils/async.js:72:7
    at /Users/yourProjectPath/node_modules/gensync/index.js:108:33
    at step (/Users/yourProjectPath/node_modules/gensync/index.js:280:14)
    at /Users/yourProjectPath/node_modules/gensync/index.js:266:13
    at async.call.result.err.err (/Users/yourProjectPath/node_modules/gensync/index.js:216:11)
Copy the code

    The reason:

    Since Babel has been upgraded to 7.x,.babelrc still references the babel-plugin-transform-Runtime for Babel 6.x

    How to solve:

    Uninstall the Babel – plugin – transform – runtime

    npm un babel-plugin-transform-runtime
Copy the code

    Install @ Babel/plugin – transform – runtime

    npm i -D @babel/plugin-transform-runtime
Copy the code

    Remove babel-preset-env from.babelrc and use @babel/ plugin-transform-Runtime instead

    - { "plugins": ["babel-plugin-transform-runtime"] }
+ { "plugins": ["@babel/plugin-transform-runtime"] }
Copy the code

  7. ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

    Error log:

    ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css (./node_modules/css-loader/dist/cjs.js?? ref--11-1! ./node_modules/element-ui/lib/theme-chalk/index.css) Module build failed (from ./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'minimize'. These properties are valid: object { url? , import? , modules? , sourceMap? , importLoaders? , localsConvention? , onlyLocals? } at validate (/Users/yourProjectPath/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:50:11) at Object.loader (/Users/yourProjectPath/node_modules/css-loader/dist/index.js:34:28) @ ./node_modules/element-ui/lib/theme-chalk/index.css 4:14-81 14:3-18:5 15:22-89 @ ./src/main.ts @ multi ./build/dev-client ./src/main.tsCopy the code

    The reason:

    The minimize allocation is removed

    How to solve:

    Remove the minimize option from CSS-Loader

  8. The ‘mode’ option has not been set

    Error log:

    WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
Copy the code

    The reason:

    Webpack 4 starts with the mode option to enable the built-in options provided by WebPack, default to production when not set

    How to solve:

    Development environment Settings: Development, build environment Settings: Production

Now you are ready to run through the development environment package

Run through the build environment packaging

Problems encountered during operation:

  1. webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

    Error log:

    /Users/yourProjectPath/node_modules/webpack/lib/webpack.js:189 throw new RemovedPluginError(errorMessage); ^ Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. at Object.get [as CommonsChunkPlugin] (/Users/yourProjectPath/node_modules/webpack/lib/webpack.js:189:10) at Object.<anonymous> (/Users/yourProjectPath/build/webpack.prod.conf.js:85:26) at Module._compile (module.js:643:30) at Object.Module._extensions.. js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Module.require (module.js:587:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/yourProjectPath/build/build.js:12:23) at Module._compile (module.js:643:30) at Object.Module._extensions.. js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Function.Module.runMain (module.js:684:10)Copy the code

    The reason:

    Webpack.js.org/migrate/4/#…

    According to the error message, webPack4 CommonsChunkPlugin is deleted

    How to solve:

    Remove the configuration associated with the CommonsChunkPlugin and use the optimization.splitchunks configuration item instead

    The default configuration was chosen to fit web performance best practices, but the optimal strategy for your project might differ. If you’re changing the configuration, You should measure the impact of your changes to ensure there ‘s a real practice. Webpack.js.org/plugins/spl…

    As described in the plug-in documentation, we do not add additional configuration here and use the default value of the optimization.splitchunks configuration item.

    // webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: "async".minSize: 30000.maxSize: 0.minChunks: 1.maxAsyncRequests: 5.maxInitialRequests: 3.automaticNameDelimiter: "~".automaticNameMaxLength: 30.name: true.cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/.priority: - 10,},default: {
          minChunks: 2.priority: - 20.reuseExistingChunk: true,},},},},};Copy the code

  2. Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    Error log:

    /Users/yourProjectPath/node_modules/webpack/lib/Chunk.js:866 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (/Users/yourProjectPath/node_modules/webpack/lib/Chunk.js:866:9) at /Users/yourProjectPath/node_modules/extract-text-webpack-plugin/dist/index.js:176:48 at Array.forEach (<anonymous>) at /Users/yourProjectPath/node_modules/extract-text-webpack-plugin/dist/index.js:171:18 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/yourProjectPath/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1) at AsyncSeriesHook.lazyCompileHook (/Users/yourProjectPath/node_modules/tapable/lib/Hook.js:154:20) at Compilation.seal (/Users/yourProjectPath/node_modules/webpack/lib/Compilation.js:1342:27) at compilation.finish.err (/Users/yourProjectPath/node_modules/webpack/lib/Compiler.js:675:18) at hooks.finishModules.callAsync.err (/Users/yourProjectPath/node_modules/webpack/lib/Compilation.js:1261:4) at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/yourProjectPath/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1) at AsyncSeriesHook.lazyCompileHook (/Users/yourProjectPath/node_modules/tapable/lib/Hook.js:154:20) at  Compilation.finish (/Users/yourProjectPath/node_modules/webpack/lib/Compilation.js:1253:28) at hooks.make.callAsync.err  (/Users/yourProjectPath/node_modules/webpack/lib/Compiler.js:672:17) at _done (eval at create (/Users/yourProjectPath/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1) at _err1 (eval at create (/Users/yourProjectPath/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:22) at _addModuleChain (/Users/yourProjectPath/node_modules/webpack/lib/Compilation.js:1185:12)Copy the code

    The reason:

    The extract-text-webpack-plugin was deprecated in Webpack 4 and replaced with the Mini-CSs-extract-plugin

    How to solve:

    Uninstall extract – text – webpack – the plugin

    npm un extract-text-webpack-plugin
Copy the code

    Install the mini – CSS – extract – the plugin

    npm i -D mini-css-extract-plugin
Copy the code

    Remove the extract-text-webpack-plugin configuration and use mini-CSS-extract-Plugin instead

    // utils.js
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');

if (options.extract) {
- return ExtractTextPlugin.extract({
- use: loaders,
- fallback: 'vue-style-loader'
-});
+ return [
+ {
+ loader: MiniCssExtractPlugin.loader,
+ options: {
+ hmr: process.env.NODE_ENV === 'development'
+}
+}
+ ].concat(loaders);
} else {
  return ['vue-style-loader'].concat(loaders);
}
Copy the code
    // webpack.prod.conf.js
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  plugins: [
- new ExtractTextPlugin({
+ new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
    }),
  ]
}
Copy the code

    If the project is not built using vue-CLI 2.x, you may need to modify it like this:

    See: webpack.js.org/plugins/min…

    // webpack.prod.conf.js
/ / * * *
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      / / * * *
      {
        test: /\.css$/.use: [{loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === "development",}},"css-loader",],},],},plugins: [
    / / * * *
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",})]};Copy the code

  3. DefaultsError: warnings is not a supported option

    Error log:

    ERROR in static/js/170.b2935281265dd9ec23b7.js from UglifyJs DefaultsError: `warnings` is not a supported option at DefaultsError.get (eval at <anonymous> (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:18:1), <anonymous>:71:23) at Function.buildError (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/index.js:105:54) at results.forEach (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/index.js:258:52) at Array.forEach (<anonymous>) at taskRunner.run (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/index.js:233:17) at step (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:85:9) at done (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:96:30) at boundWorkers (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:101:13) at TaskRunner.boundWorkers (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:70:11) at enqueue (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:91:14) at tasks.forEach (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:111:9) at Array.forEach (<anonymous>) at  TaskRunner.run (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/TaskRunner.js:89:11) at UglifyJsPlugin.optimizeFn (/Users/yourProjectPath/node_modules/uglifyjs-webpack-plugin/dist/index.js:227:18) at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/yourProjectPath/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1) at AsyncSeriesHook.lazyCompileHook (/Users/yourProjectPath/node_modules/tapable/lib/Hook.js:154:20)Copy the code

    The reason:

    As a result of UglifyJs upgrades, uglifyjs-webpack-plugin relies on UglifyJs

    Details: github.com/mishoo/Ugli…

    How to solve:

    Remove the uglifyOptions.com Press option

    // webpack.prod.conf.js
new UglifyJsPlugin({
  uglifyOptions: {
- compress: {
      warnings: false,
      drop_console: true,
      drop_debugger: true
-}}}),Copy the code

  4. Unexpected token: keyword « const »

    Error log:

    ERROR in static/js/app.2c7ff4a31971e22c9397.js from UglifyJs Unexpected token: Keyword « const » [static/js/app. 2 c7ff4a31971e22c9397. Js: 3865, 0]Copy the code

    The reason:

    uglifyjs-webpack-pluginDoes not supportes6grammar

    How to solve:

    Uninstall uglifyjs webpack — the plugin

    npm un uglifyjs-webpack-plugin
Copy the code

    Delete the configuration associated with uglifyjs-webpack-plugin without additional configuration, because in Production mode, Webpack uses terser-webpack-plugin by default to minimize JavaScript files

conclusion

After a series of problems at this point, both the development and production environment packaging is ready to go. This article has documented the problems, causes and solutions of two Webpack 3.x projects when upgrading to Webpack 4.x. I hope it will be helpful.

In the next installment, I’ll show you how to optimize the packaging of WebPack.

Refer to the link

  • How to migrate vuE-Loader from V14 to V15
  • Webpack Loader execution sequence