Learn Webpack, start here!

What is Webpack?

Webpack is a module packaging tool that not only reduces network traffic, but also reduces server requests and reduces server stress.

Two, how to use?

The following is a simple procedure for packaging CSS files.

1. New projects

Initialize the WebPack project, including the configuration file

  #Initialize a new WebPack project
  mkdir learn-webpack
  cd learn-webpack
  npx webpack-cli init

  #2. Proceed as follows
  ? Which of the following JS solutions do you want to use? none
  ? Do you want to use webpack-dev-server? No
  ? Do you want to simplify the creation of HTML files for your bundle? Yes
  ? Do you want to add PWA support? No
  ? Which of the following CSS solutions do you want to use? none
  ? Do you like to install prettier to format generated configuration? No
  ? Pick a package manager: npm
Copy the code

2. Add the CSS

Create a new SRC /style. CSS file and copy the following code into the file.
```
h2 {
    color: red;
}
Copy the code
```

Modify the SRC /index.js file as follows:

import './style.css';

console.log("Hello webpack!")
Copy the code

Modify the webpack.config.js file to add the following CSS configuration:

module: {
        rules: [{test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset'}, {test: /\.css$/i,
                use: ['style-loader'.'css-loader'],},// Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/],},Copy the code

Install the LOAD plug-in of the CSS

npm install style-loader css-loader
Copy the code

3. Run projects

The command

#Perform the conversion
npm run build
Copy the code

When you’re done, the dist folder is created in the project root directory, and the browser can open the index.html file to see the effect. The CSS file in SRC has been packaged.

3. Important Concepts

1, webpack – cli

Command line interface (CLI) for configuring and interacting with builds.

#The installation
npm install webpack-cli

#Run webpack
npx webpack build

#Create a new WebPack project
npx webpack init
Copy the code

The command that

2. Configuration files

NPX WebPack init lets you quickly create new WebPack projects, including configuration files.

For more configuration, see here!

3, the loader

Webpack can only parse JavaScript and JSON files by default, and Loader enables WebPack to handle other types of files.

Babel-loader: Enables WebPack to convert ES2015+ syntax, JSX written code into JavaScript code;
Less-loader: Allows Webpack to convert code written in less syntax into CSS code.
More loader see here!

4, the plugin

You can make WebPack easier to use. For example, the new WebPack project above uses the htML-webpack-plugin, which will generate an HTML5 file for you. Use the Script tag in the body to import all webPack-generated bundles.

See more plugin here!

Iv. Case scenario

1. How to package less files?

The steps are the same as above, just configure the file and install loader! Detailed steps, see here!

5. Reference documents