Webpack5 to build VUE3 Project (II)

  • Install vUE and VUE-loader

    yarn add vue@next

    yarn add vue-loader@next thread-loader -D

    Configuration webpack. Config. Js

      const VueLoaderPlugin = require('vue-loader/dist/plugin').default // Need to add default, details can be viewed source
  module.exports = {
    entry: {
      main: 'main.js'
    },
    output: {
       path: 'dist'.filename: '[name].js', publicPath:'/'
    },
    module: {
      rules: [{test: /\.js$/,
          use: [
            'thread-loader'.// Use thread-loader to enable multithreading
            'babel-loader'] {},test: /\.vue$/,
          loader: 'vue-loader'}}}]Copy the code

  • Configure babel-related installs babel-related loaders and plug-ins

    yarn add babel-loader @babel/core @babel/preset-env @babel/polyfill @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import -D

    babel.config.js

      module.exports = {
    presets: [["@babel/preset-env",
        {
          "useBuiltIns": "entry".module: false.corejs: 3}]],plugins: [["@babel/plugin-syntax-dynamic-import"]]}Copy the code

  • Let’s add webpack-dev-server to make it easier to run and install the html-webpack-plugin

yarn add webpack-dev-server html-webpack-plugin -D

Modify webpack.config.js

  const webpack = require("webpack")
  const path = require('path')
  const VueLoaderPlugin = require('vue-loader/dist/plugin').default // Need to add default, details can be viewed source
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const resolve = (filePath) = > {
  	return path.resolve(__dirname, filePath)
  }
  module.exports = {
    entry: {
      main: resolve('src/main.js')},output: {
       path: resolve('dist'),
       filename: '[name].js', publicPath:'/'
    },
    devServer: {
      host: '0.0.0.0'.port: 8088.hot: true.// Use with Hmr
      historyApiFallback: true.// The reason for this is that when our vUE route is set to history mode, if we refresh the page at localhost:8088/ ABC, the error 404 will be reported. This is set up to solve that problem.
    },
    module: {
      rules: [{test: /\.js$/,
          use: [
            'thread-loader'.// Use thread-loader to enable multithreading
            'babel-loader'] {},test: /\.vue$/,
          loader: 'vue-loader'}},plugins: [
       new VueLoaderPlugin(),
       new HtmlWebpackPlugin({
  	 	template: resolve('index.html'),
  		filename: 'index.html'.title: 'build vue3 webpack5'.// icon: ", // select a favorite icon to add here.
  		inject: true
  	 }),
       new webpack.HotModuleReplacementPlugin()
    ]
  }
Copy the code

We also need to add an index.html page in the root directory

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
Copy the code

Then let’s change the scripts in the package.json file in the root directory

 {
    "scripts": {
        "dev": "webpack-dev-server --config webpack.config.js --inline --progress"}}Copy the code

So we can run our project from the command line using YARN Dev. Next we create a new app.vue file in the SRC directory

</template> <script> import {ref} from 'Vue' export default {setup () {let username =  ref('helloworld') return { username } } } </script>Copy the code

Now open the main.js file in the SRC directory

  import {createApp} from 'vue'
  import App from './App.vue'
  const app = createApp()
  app.mount('#app')
Copy the code

At this point, we go to the root directory, hold down shift and right mouse button, choose here to open the command window, type YARN Dev, press Enter, and wait for the project to start. If anything happens, an error will be reported. The error message should look something like this.

sealing module hashing(node:8616) UnhandledPromiseRejectionWarning: TypeErro
r [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an insta
nce of Buffer, TypedArray, or DataView. Received undefined
  at Hash.update (internal/crypto/hash.js:82:11)
  at BulkUpdateDecorator.update (E:\studywebfront\Webpack\webpack5_vue3\node_m
odules\webpack\lib\util\createHash.js:51:14)
  at NormalModule.updateHash (E:\studywebfront\Webpack\webpack5_vue3\node_modu
les\webpack\lib\NormalModule.js:1191:8)
  at Compilation._createModuleHash (E:\studywebfront\Webpack\webpack5_vue3\nod
e_modules\webpack\lib\Compilation.js:3097:10)
  at Compilation.createModuleHashes (E:\studywebfront\Webpack\webpack5_vue3\no
de_modules\webpack\lib\Compilation.js:3069:10)
  at E:\studywebfront\Webpack\webpack5_vue3\node_modules\webpack\lib\Compilati
on.js:2346:11
....
Copy the code

This is due to the absence of @vue/ Compiler-SFC, so let’s install it.

yarn add @vue/compiler-sfc -D

Vue template-compiler (@vue/ compiler-sFC) is used to install vue template-compiler (@vue/ compiler-sFC). After the installation we run Yarn Dev again and wait for the project to start. We type localhost:8088 in the browser and see our page.

There will definitely be problems later (for example, webpack5 hot update will not work, we need to change the target value to ‘web’ in the Webpack configuration), if you encounter problems, please throw them out and we will solve them together. Thank you guys for sharing.

Here are some of the problems I encountered

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- E: \studywebfront\Webpack\webpack5_vue3\node_modules\webpack-dev-server\bin\web
pack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js15) : 966:at Function.Module._load (internal/modules/cjs/loader.js: 842-27)at Module.require (internal/modules/cjs/loader.js19) : 1026:at require (internal/modules/cjs/helpers.js18) : 72:at Object. <anonymous> (E: \studywebfront\Webpack\webpack5_vue3\node_modules\w
ebpack-dev-server\bin\webpack-dev-server.js: 65:1)at Module._compile (internal/modules/cjs/loader.js30) : 1138:at Object.Module._extensions.js (internal/modules/cjs/loader.js: 1158:10)at Module.load (internal/modules/cjs/loader.js32) : 986:at Function.Module._load (internal/modules/cjs/loader.js: 879:14)at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js: 71:12) {code: 'MODULE_NOT_FOUND',
  requireStack: ['E: \ \studywebfront\ \Webpack\ \webpack5_vue3\ \node_modules\ \webpack-dev-server\ \bin\ \webpack-dev-server.js']Copy the code

When you encounter this problem, change webpack-CLI to the lower version [email protected]

Github address: github.com/ComponentTY… Webpack5 build VUe3 give it a star, big guys, github is already built and is being used in their own company’s internal projects.