Webpack5 To build Vue3 Project (I)

We used YARN instead of NPM in our project because YARN is faster than NPM.

  1. Initialize the project YARN Init

First we create a folder called WebPack5-vue3, then hold down Shift + right mouse button and select Open Terminal at current location. Enter the yarn init -y command on the terminal

  1. Install webpack webpack-cli webpack-dev-server webpack-merge; Command to

yarn add webpack webpack-cli webpack-dev-server webpack-merge -D 3. Write webpack configuration file, create a new file named webpack.config.js in the current directory, when we execute webpack on the command line, Webpack will read the configuration of the default file webpack.config.js;

  const path = require('path')

  const resolve = (filePath) = > {
      return path.resolve(__dirname, filePath)
  }

  module.exports = env= > ({
      mode: env,
      entry: {
          main: resolve('src/main.js')},output: {
          filename: 'js/[name].js'.path: resolve('servers/dist')}})Copy the code

We also need to set the script command to run in package.json and add the following code to scripts

  "scripts": {
    "build": "webpack --mode=development"
  },
Copy the code

According to the above configuration, we need to create a SRC folder under the current folder, and create a main.js file in the SRC folder, which should look like this.

Running NPM run build on the command line will create a Servers /dist folder in the current directory with a main.js file. This is the end of the simple configuration

  • ES6 -> ES5 Loader configuration
  • Vue3 configuration in Webpack
  • Typescript configuration in WebPack
  • Configure static resources such as CSS, IMG, and font
  • Packaging configuration, Treeshaking configuration, environment configuration, and so on, this is the final chapter.

Github address: github.com/ComponentTY… Give me a star, big man. Let’s work together, okay? Thank you, big man.