preface

Recently, when USING Qiankun to conduct micro front end, I encountered an optimization problem, that is, if both base and sub-app share the same version of Vue and vantUI, the base and main app will be packaged separately, resulting in increased code volume required by users. In order to optimize this problem, we initially thought of the external of Webpack and the functionality of Qiankun to pass to sub-applications through props, but they were not the optimal solution. The best solution was to use Module Federation, so we had to upgrade to Webpack 5.

Simple project upgrade webPack 5

Try the dock project first, because the dock project is relatively simple and doesn’t have many loaders and plugins

Perform the upgrade according to the upgrade document on the official website

Yarn: yarn add webpack@next -D
Copy the code

^ 5.0.0-RC.6 ^ 5.0.0-rC.6 ^ 5.0.0-rC.6 ^ 5.0.0-rC.6 ^ 5.0.0-RC.6 ^ 5.0.0-RC.6 NPM View Webpack Version 5.3.1 is the latest release candidate.

An object under htmlWebpackPlugin is frozen and cannot add attributes. Therefore, the version of htmlWebpackPlugin is too low and needs to be upgraded. Using NPM outdated, I checked whether there is an outdated version in the project. It’s been upgraded along with it. It is found that htmlWebpackPlugin is not included, so it is inferred that htmlWebpackPlugin should not be adapted to Webpack5.

Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
Copy the code

By looking at the latest version of htmlWebpackPlugin is also 5.3.1, then the webpack version is on, then upgrade webpack and htmlWebpackPlugin to 5.3.1, start the project, the problem is solved.

Upgrade a slightly more complex Vue CLI project

This upgrade is much larger than the previous one, mainly because vue cli support for webpack5 is in beta, and there is no detailed migration documentation and less information on the network.

First, update the main 3 tools used by @vue/ CLI to the latest:

"@ vue/cli - plugin - Babel" : "^ 5.0.0 - beta. 1", "@ vue/cli - plugin - eslint" : "^ 5.0.0 - beta. 1", "@ vue/cli - service" : "^ 5.0.0 - beta. 1",Copy the code

Startup, error:

jsonpFunction not available in webpack 5
Copy the code

The jsonpFunction configuration has been changed to chunkLoadingGlobal in webpack. Continue startup, error:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
Copy the code

Webpack 5 has abandoned the default compatibility for these Node packages. Therefore, there are two suggestions. One is to replace the compatibility packages with empty packages.

resolve.fallback: { "crypto": false }
Copy the code

Config.resolve. fallback in chainWebpack does not work. It is not supported yet.

The temporary solution is to use aliases because the Vue CLI has no fallback configuration.

config.resolve.alias.set('crypto', require.resolve("crypto-browserify"))
Copy the code

Restart again:

Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'plugins'. These properties are valid: object { postcssOptions? , execute? , sourceMap? , implementation? }Copy the code

By referring to my current configuration:

CSS: {loaderOptions: {sass: {// Adjust prependData: '@import "@/mixin.scss"; ' }, postcss: { plugins: [ require('postcss-px-to-viewport')({ viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines', /^\.dp/, /^\.scroller/, /^\.van/], minPixelValue: 1, mediaQuery: false }),Copy the code

Since the Vue CLI is still in beta, Google could not find the answer to this question, so we tried several times. The final structure was found to be:

LoaderOptions: {sass: {// Adjust prependData: '@import "@/mixin. SCSS "; ' }, postcss: { postcssOptions: { plugins: [ require('postcss-px-to-viewport')({ viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines', /^\.dp/, /^\.scroller/, /^\.van/], minPixelValue: 1, mediaQuery: false }),Copy the code

Continued startup error:

Eslint not a controller
Copy the code

Update Eslint to the latest.

Continued startup error:

 3:26  error  Parsing error: Unexpected token

  1 | <template>
  2 |     <div>
Copy the code

Eslint parser error: EsLint parser error: EsLint parser error:

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "babel-eslint",
      "sourceType": "module"
  }
Copy the code

Finally, the project was successfully started.

Conclusion:

Because vue CLI is the Webpack configuration package, if the current upgrade document has not come out when to upgrade, resistance is still quite large, most need to rely on the understanding of the error prompts and speculation to solve, part of the answer can not be found on the Internet, you need to feel the stones across the river. I also hope that students who have the same experience can avoid detours in this article.