Let me ask you a very simple question:

How is vue init Webpack prjectName different from vue Create projectName?

They are vue-CLI 2 and vue-cli3 commands for creating projects. The fundamental reason why the two commands are different is that vue-cli2 is based on WebPack 3, while vue-cli3 is based on WebPack 4.

So we first introduce webpack is how to manage the project, how to project JS, CSS, HTML and so on is how to compress the conversion file? Then learn how to create a project with VUE-CLI 2 and VUe-CLI 3 respectively, and introduce the project structure.

A comprehensive understanding of Webpack

1.1. What is Webpack?

Webpack is the front-end modular packaging tool. In human terms, the idea of WebPack is to make everything modular. You put a bunch of JS, CSS, etc. files into a general entry file, and the rest of WebPack will merge the imported files into a bundle.js according to the corresponding relationship. The packaged index.html can be imported into the bundle. In addition to CSS, JS, images, fonts, HTML templates can be modular packaging.

The diagram below:

1.2. Why put all resources in one file?

As we all know, when rendering a web page, the fewer things it loads, the faster the response, the faster the page loads. Sometimes, in order to optimize performance, we will merge all the resources into a single file, resulting in a large file, which often has two problems:

  • When a project is large, different pages cannot be loaded on demand, and loading all resources at once takes too long and degrades performance
  • This leads to messy relationships between dependent libraries, which can become difficult to maintain as the project grows larger.

However, webpack can solve the above two problems well. Webpack has two loading modes, synchronous and asynchronous, and can be loaded on demand after being correctly configured. So WebPack is a very clever and excellent packaging tool.

1.3. Why use WebPack?

  1. Friendly support to modular specifications CommonJS, AMD, CMD.
  2. Form a project dependency tree, and each dependency can be divided into a module for loading on demand.
  3. There is a powerful plug-in system, can achieve code compression, subcontracting, module hot replacement, self-defined modules and other automation.
  4. Development configuration is fast and efficient. Front-end is the most mainstream modular packaging tool.

Start your first Webpack project

Webpack is a Node-based project, so we need to install Node.js before we can use it.

Node. js official website: nodejs.org/zh-cn/

Download and install. When the installation is complete:

Run the node -v command to check the node version, for example, V12.18.2

Use NPM -v to check the version of NPM

2.1. Install WebPack

Installation can be divided into: global installation and current project installation.

NPM install webpack-g

Node_modules folder will contain webpack. At this point we can use webpack;

NPM install webpack –save or NPM install webpack –save-dev

NPM install webpack –save differs from NPM install webpack –save-dev by storing dependencies in dependencies and devdependencies.

2.2. Generate package.json

Create a webPack project folder, go to the root directory of the project file and run the command: NPM init

As shown in figure: A package.json file will be generated in the root directory after you enter the corresponding information as prompted.

2.3 Content of new project

Dist — Distribution

Create a dist folder to store the packaged files.

Create a SRC folder and create index.js as the entry. Create the index.html file and create the main.js file and import the HTML.

2.3. Configure WebPack

The code for webpack.config.js is as follows:

module.exports={
 entry:'./src/main.js',
 output:{
  path:'./dist',
  filename:'bundle.js'
 }
}
Copy the code

Entry: Configures the entry file

Output: Sets the path and filename of the packaged file.

Run the webpack –config webpack.config.js command to pack.

Command error:

  • Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
  •  – configuration.output.path: The provided value “./dist” is not an absolute path!
  •  -> The output directory as absolute path (required).

A message is displayed indicating that an absolute path is required.

2.4. Pack files

In this case, the Path module of Node needs to be introduced. And modify the path configuration, set the path to the current project root directory.

Modify package.config.js as follows:

const path = require('path')
module.exports={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
 filename:'bundle.js'
 }
}
Copy the code

Re-run the webpack –config webpack.config.js command to pack. A bundled bundle.js file appears in the dist folder.

What does Webpack do?

As described above, js content is only packaged, and the specific index.html is not packaged into dist file. What’s the reason for that?

Webpack is used to process the JS code we write, and WebPack automatically handles dependencies between jS. However, there are not only basic JS code processing, but also CSS, images, and some advanced ES6 to ES5, TypeScript to ES5, SCSS, less to CSS, jsx.vue files to JS files.

Webpack does not support these transformations, so you need to extend WebPack. The next article introduces loaders and plugins for Webpack.

Thank you for your support!