01. Elementui source code learning: project initialization and webpack configuration

Time:2021-6-14

0x00. Project initialization

Since the whole process is pixel level copy element, it will not be usedvue-cliInitialize the project.

Create project

Create a new empty folder and usenpm initTo initialize the project and install the Vue module.

carbon (17).png

Modify directory structure

Add folder to root

carbon (18).png

To create a project configuration file in the root directory:.gitignore README.md
Create a template page file in the public directoryfavicon.ico index.html
In the examples directory, create an example entry file:App.vue main.js logo.png

Installation and configuration of 0x01.wepack

The project uses webpack to achieve modular management and packaging.

Local installation of webpack

carbon (16).png

webpack-cliThe latest is4.Xedition,webpack-dev-serverUnable to run normally. You need to specify the version when installing (make sure that both modules are of the same version)3.X)。

carbon (14).png

webpack-cliMany commands are provided to make the work of webpack easy.Official documents
webpack-dev-serverIt provides you with a simple web server with live reloading function.Official documents

Install webpack loaders

Webpack uses loader to preprocess files. You can build any static resource, including JavaScript.
Official plug in list
Chinese document of webpack plug in

carbon (15).png

reference resources
Detailed explanation of Vue loader:https://segmentfault.com/a/1190000020629508
HTML webpack pluginhttps://www.cnblogs.com/wonyun/p/6030090.html

Webpack configuration

staybuildCreate a webpack configuration file in the directorywebpack.config.js, providingEntryModeOutputModulePluginsDevelopment server (devserver)And so on.Official documents

carbon (11).png

Project operation

NPM scripts configuration

Add webpack command in NPM script, and the executed command will be automatically deletednode_modulesLook for, don’t add directory.

modifypackage.jsonto configure

.
...
"scripts": { 
    "build:dist": "webpack --config  build/webpack.config.js",
    "dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.

Cross env configuration

Cross env is a script that runs cross platform setting and using environment variables. Different platforms use unique instructions, so there is no need to worry about cross platform problems.

carbon (13).png

modifypackage.jsonto configure

.
...
"scripts": { 
    "build:dist": "cross-env NODE_ENV=development webpack --config  build/webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
},
...
.

Run the test

In the command line window, enter thenpm run devLocal development and debugging can be carried out.

微信截图_20210414165142.png

After running successfully, the results of the first page of the project are as follows:

微信截图_20210414165237.png

Final directory structure

carbon (19).png

Example code

Github Repo