Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

1. VueWhat are the files that the project loads

  • JavaScriptPackaging:
    • willES6Syntax intoES5Grammar;
    • TypeScriptTo convert it toJavaScript;
  • CSSProcessing:
    • CSSFile module loading and extraction;
    • Less,SassSuch as preprocessor processing;
  • img,fontProcessing of resource files:
    • The pictureimgFile loading;
    • The fontfontFile loading;
  • HTMLProcessing of resources:
    • packagingHTMLResource Document (HTMLFiles are the entry point to static resources for the entire project);
  • VueThe projectSFCFile (.vueDocuments) processing:
    • .vueThe file must eventually be convertedJavaScript 或 CSSThe conversion process will be handed overWebpack 的 loaderWe’ll talk about it later;

These are the files that Vue projects typically need to load, and that need to be packaged by Webpack.

2. WebpackThe premise of using

Webpack is also written in code (mostly JavaScript code (99.8%)), which of course requires an environment to run JavaScript code, and Webpack requires a Node environment.

Since Webpack relies on the Node environment [^1] to run, we must have the Node environment on our computer.

  • So we need to install Node.js first, which will automatically install NPM (for Node Package Manager, we use it to manage some packages).

  • My current node version on my computer is V14.15.3 and NPM is 6.14.9 (you can also manage node versions using NVM or N).

  • Node.com: nodejs.org/

You are advised to download Node 14.x (or later).

After downloading and installing Node, you can open the cli terminal to view the Node version and NPM version:

The Node installation is successful if the version information is successfully displayed as shown above.

Note: Node must be at least 14 and NPM must be at least 6.

3. WebpackThe installation of

To use the Webpack tool, you must install it first. However, the installation of Webpack is different from our usual installation (download and double-click the installation file to install). We use the NPM tool in the command line terminal (Windows is CMD, macOS is terminal.app) (as mentioned earlier, Install Webpack.

In the latest version (Webpack5), Webpack installation requires installing two things: Webpack and Webpack-CLI (in fact, the installation of Webpack-CLI is not required because we don’t need webpack-CLI to build a project. Scaffolding like Vue CLI and React doesn’t have webpack-CLI. We don’t even need webPack-CLI to download the webpack source code and have it help us compile a piece of code. The webpack-CLI tool is used to read the Webpack commands we use on the command line and the parameters passed. In the beginning, we’ll be running WebPack from the command line, so we’ll need to install WebPack-CLI. But webpack-CLI is essentially going to call Webpack, so when we run webpack, we’re going to run webpack stuff, and then Webpack calls webpack-CLI, Webpack is still called inside webpack-CLI, that is, the process looks like this: webpack- > webpack-cli -> webpack).

Relationship between Webpack and Webpack-CLI:

  • performwebpackCommands will be executednode_modulesIn the directory.binIn the directorywebpack;
  • webpackDependencies at execution timewebpack-cliIf not installed, an error will be reported;
  • whilewebpack-cliWhen the code is executed, it is truly utilizedwebpackCompile and package processes;
  • So in installingwebpackWhen, we need to install at the same timewebpack-cli(The third party scaffolding is not actually usedwebpack-cliBut is similar to their ownvue-service-cliSomething);

So, again, since we’re working from the command line, we need to install WebPack-CLI.

Let’s open the command line terminal on the computer (I’m using VS Code terminal here) and install webpack and webPack-CLI globally first:

npm install webpack webpack-cli -g
Copy the code

-g can also be written as –global, which means webpack can be used when the command line is opened in any directory. For partial installation, you can replace -g with -d.

If you already have WebPack installed on your computer, executing the command above will help you install the latest version of WebPack.

After the installation is successful, you can run the webpack -v command to view the installed Webpack version.

Now we are ready to use WebPack.