Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Turn around, feel around, suddenly found the notes of webpack build Vue before, and then re-do it. After the end, we will also take you to build VUe3 with WebPack5 + vite build VUe3, enjoy looking forward to it!

The preparatory work

  1. Install the latest Node.js environment; (Official website: nodejs.org/zh-cn/)
  2. Install CNPM TAOBAO NPM image; NPM install -g CNPM — name =registry.npm.taobao.org
  3. In Windows, run the Windows +R command, enter CMD to open the command tool, and check whether NPM is installed. Run the NPM -v command
  4. Enter the command: webpack -v to check the current version of webpack (ps: if no, NPM install webpack: enter the command: NPM install webpack -g)
  5. Go to the project directory and type NPM init to generate a package.json file
  6. Enter the command: NPM install webpack –save-dev to add webpack dependencies to your project
  7. New webpack.config.js; (Used to configure how WebPack runs)

Now the structure of our webpackDemo folder should look like this:

Ps: WebPack 4.0 requires additional installation of WebPack – CLI yo

npm install webpack --save-dev npm install webpack-cli --save-dev
Copy the code

Ps: Knowledge supplement, mainly I was too vegetables at that time, these are not how to understand…

mkdir webpackDemo // Create the project
cd webpackDemo // Enter the project
mkdir app // Create the app file in the project
mkdir common // Create the common file in the project
cd app // Go to the app folder
cd .. // Return to the webpackDemo project root directory
cd common // Enter the common file
touch index.html // Create the index.html file
Copy the code
  • Mkdir: creates a folder
  • cd .. : Returns the upper directory of the current directory
  • Touch: Creates a file
  • App: For storing raw data and JavaScript modules we will write
  • Common: Used to store files for the browser to read later (including js files generated using webpack and an index.html file)