Webpack profile

Webpack is a static Module bundler for modern JavaScript applications. When WebPack processes an application, it internally builds a dependency graph that maps to each module required for the project and generates one or more bundles.

Core logic for WebPack packaging
  • Analyze the dependency tree for the entire application, starting with the entry file.
  • Wrap each dependency module in an array and wait for execution.
  • Implement the method of module loading and place it in the environment of module execution, ensuring that modules can call each other.
  • Put the logic to execute the entry file in a function expression and execute the function immediately.
Configure the development environment — NPM and package manager

What does a package manager do first? Simply put, it is a tool for developers to easily get code and distribute code. Down to a simple new project, understand the inside of the configuration of pa ~

mkdir demo
cd demo
npm init
Copy the code

Then open the project with the compiler and you’ll see the package.jons file for the project

"Name ": "demo", // version number "version": "1.0.0", "description": "", // execution entry "main": "Index.js ", // Custom scripts - many development and build automation commands "scripts": {"test": "echo "Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }Copy the code

There are two commands for installing packages:

npm install lodash --save
npm install jquery --save-dev
Copy the code

So what’s the difference between the two?

NPM install lodash --save // NPM install lodash -sCopy the code

This notation is for production dependencies, and all functional dependencies should be placed here. NPM install installs dependencies after the package is published. In this case, we only install Dependencies and ignore devDependencies. Json < span style = “box-sizing: border-box; color: RGB (51, 51, 51); line-height: 21px; font-size: 14px! Important; word-break: break-all;”

"Dependencies ": {" 0" :" 0"}Copy the code

Here’s another way to write it:

NPM install jquery --save-dev //Copy the code

This specifies that the current environment is a development environment, usually with build tools, quality checking tools, etc., such as ESLint, etc. The packages we use for local development tend to be placed in devDependencies. After the package is installed successfully, the package.devDependencies page is displayed at package.devDependencies:

"DevDependencies ": {"jquery": "^3.5.1"}Copy the code

We can customize the command name and execute the script, such as test, dev, build, etc. Dev and bulid commands are used in a project

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server",
  "build": "eslint ./src && webpack"  
}
Copy the code

Webpack core features

Let’s take a look at the core webPack features: Loader and Plugin

What about loader? In my opinion, loader is a “translator”, because WebPack only handles JS code, when we want to package CSS and other files, we need to use the corresponding Loader to handle. We first add csS-loader to our project:

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ]
        }
    ]
}
Copy the code

After adding CSS-loader, we found that the CSS file did not work at this time. This is because the CSS-loader we introduced at this time only solved the problem of CSS syntax parsing, but did not load the style onto the page. At this time, we need to introduce style-loader to solve the problem of style loading. Style-loader generates a style tag and inserts it into the HTML page.

But be sure to add style-loader before CSS-loader, because loader configuration order and load order is the opposite! Why pinch now? Loader supports chained calls. Each loader in the chain applies the transformation to the processed resource. A set of chained Loaders will execute in reverse order. The first loader in the chain passes its results (that is, applied resources) to the next loader, and so on. Finally, the last loader in the chain returns the JavaScript that WebPack expects. If you don’t understand, just remember!

Plugins allow us to extend WebPack and add custom build behaviors, enabling webPack to perform a wider range of tasks and build capabilities. Plugins listen for events during compilation and embed functionality into the webpack compilation process. Fresh chestnuts on the bottom

// NPM install uglifyjs-webpack-plugin --save-dev // add const to webpack.config uglifyJSPlugin = require('uglifyjs-webpack-plugin'); plugins: [ new uglifyJSPlugin() ]Copy the code

Then look at the size of your project. Is it getting smaller?

Learn how to build a simple React project