This tutorial is for webpack beginners. This is also some notes I put together for newbies as I learn webpack myself.

I. What is webpack?

As a javascript front-end developer, you must know about webpack and the various modules. webpack is a packaging tool that bundles (packages) various modules together. The supported modules are:

  • CommonJS
  • AMD
  • CSS import
  • Images url
  • Es module

webpack bundles all modules together and makes them run.

II. Important concepts

Let’s first highlight a few of the relatively important and most commonly used things.

entry point

The entry point is where webpack starts its work, a js file. webpack collects other module files through imports in this file, collects other dependencies through import statements in other module files, and finally packages all the module files together to form a single runnable code. The default entry file is src/index.js.

output

The output is the file that is formed after webpack has been packaged through the build process. The default output folder is the dist/ folder in the root directory.

loaders

loaders are some third-party extension packages that help webpack handle loading various types of files. For example, there are loaders for handling css and image files. webpack itself does not support css files without loaders.

Plugins

plugins are also third-party plugins that change the way webpack works, for example some plugins can set webpack’s environment variables.

mode

There are two ways webpack works: development (development mode) and production (production mode). The main difference is that in production mode, the resulting bundle (file) is smaller and stripped of extraneous comments, spaces, etc. at runtime. This speeds up the loading of code by the user.

III. Practice

1. Initializing the project

Now, let’s understand the working process of webpack step by step by doing. First create a new directory and initialize the project with npm init -y.

1
2

mkdir webpack-tutorial
npm init -y

Open the package.json you just created and add the following content.

1
2
3

"scripts": {
    "start": "webpack"
}

and install the following dependencies.

1

yarn add webpack webpack-cli webpack-dev-server --dev

Then execute the start command you just added.

1

yarn start

There is an error running. When we execute the start command webpack gives us an error: Module not found: Error: Can’t reolve ‘. /src’ . Don’t be afraid, remember what we mentioned before about importer file, the reason for this error is that the importer file was not found. All we need to do is add the entry file. Create the src folder and add the index.js file to the src folder with the following input.

1

console.log("webpack is so easy");

Then execute the start command again, you can see that webpack runs normally and generates a dist folder, the dist file is the output file of webpack, the location of the entry file and the output file can be changed by configuration. Because our start command does not specify the mode of webpack, webpack will run in production mode. We modify the start command to change the mode to development by modifying the start command in package.json.

1
2
3

"scripts": {
    "start": "webpack --mode development"
}

Run the start command again and webpack will run in development mode.

2. webpack configuration file, specifying input and output

As mentioned earlier, we can change the configuration of webpack. In order to configure webpack, we need to create a webpack.config.js file in the root directory. This is a js file, so we can write any runnable js code in it. First change the entry and exit files.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// webpack.config.js
const path = require("path");
module.exports = {
    // 将入口文件指定为main.js
    entry: {index: path.resolve(__dirname, "src", "main.js")},
    // 将输出文件目录改为build/
    output: {
        path: path.resolve(__dirname, "build")
    }
};

The entry field can be used to modify the entry file, the above code changes the webpack entry file to src/main.js. The output field can be used to modify the output file location, we will change the output file directory to build/. Rename the index.js file in the src directory to main.js and run the start command to see the webpack output directory build.

3. Adding html pages

In order to embed webpack packaged files into html documents with script tags, we need to use a third-party plugins extension: html-webpack-plugin. The plugin is a third-party extension that changes the way webpack works, as described above. What html-webpack-plugin does is to change the way webpack works, so that webpack can add packaged js files to the <script> tags of html pages, so that when we open the html, we can run our js scripts. First, install the plugin.

1

yarn add html-webpack-plugin --dev

Then, change the webpack.config.js file.

1
2
3
4
5
6
7
8

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public", "index.html")
        })
    ]    
}

The above code instructs webpack to load public/index.html, so create the public directory and add the index.html file with the following content.

1
2
3
4
5
6
7
8

<html>
    <head>
        <title>webpack tutorial</title>
    </head>
    <body>
        <span>webpack tutorial</span>
    </body>
</html>

Run yarn start and see the results. At this point, an index.html file will appear in our build directory with the following contents.

1
2
3
4
5
6
7
8

<html>
    <head>
        <title>webpack tutorial</title>
        <script defer src="index.js"></script></head>
    <body>
        <span>webpack tutorial</span>
    </body>
</html>

Compared to the original html file, a <script> tag has been added, and the content of the tag is the webpack packaged js file.

So, we can know what html-webpack-plugin does.

  1. load the html file.
  2. Add the webpack-packaged js file to the html file via the script tag.

4. Start local service by webpack

As a developer, you will definitely use local services. webpack provides development server, which can easily start a local service for developers to do development work. First we need to install the webpack-dev-server package.

1

yarn add webpack-dev-server --dev

Careful friends have noticed that I add --dev field when installing these ku, indicating that these packages are only used in development mode to facilitate development work, and do not work in production environment. After installing this package, it is possible to use it directly, first we change the command in package.json as follows.

1
2
3
4

"scripts": {
    "buildDev": "webpack --mode development",
    "start": "webpack serve --mode development"
}

After the change, the package command is changed to buildDev and the start local server command is start. Execute yarn start. This will start a local service on local port 8080. Open http://localhost:8080, which will display the index.html page.

5. Loading css

In order to load css, we need to use webpack loaders . webpack loaders are designed to handle a wide variety of modules and files. In order to load css files, we need to install at least two loaders as follows:

  • css-loader : allows us to import css files using import statements.
  • style-loader : inserts css styles into html dom.

Install.

1
2

yarn add css-loader --dev
yarn add style-loader --dev

To configure webpack.config.js, we need to add the module field and add rules, module means the plugin deals with various module files (ts, css, less, etc.) and rules corresponds to different file types using different loaders.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

To test if the loaders work, we add the style.css file to the src directory.

1
2
3

span {
    color: green;
}

Change the main.js file and import style.css.

1
2

import "./style.css";
console.log("webpack is so easy.");

Start the webpack server service, open localhost:8080 and you can see that our word turns green, indicating that the css file was successfully loaded.

webpacket

Note: The order of loaders is important. webpack loads loaders in right-to-left order, so the following loaders configuration is invalid.

1

use: ["css-loader", "style-loader"]

Because style-loader is responsible for inserting styles into html, the program always executes the js code first, so the first thing executed is the import of css, so the order is wrong.

Similarly, we can add SASS files, just add sass-loader, and leave this for you to try later.

6. Load es modules

The most important feature of webpack is loading es modules. By now you should know that to load es modules, we should also need to add the corresponding loaders, but in fact webpack already comes with the function to load es modules. We can use it directly. Create a new src/component.js file and write the following code.

1
2
3

export function print() {
    console.log("this is component.js");
}

Then change src/main.js.

1
2
3
4

import "./style.css";
import {print} from "./component";
console.log("webpack is so easy.");
print();

Start the service and open the browser console with the following output, indicating that the webpack es modules are loading properly.

webpacket

7. Production mode

As mentioned earlier webpack has two modes: development and production. We can specify the way webpack is packaged by modifying the scripts field in package.json.

1
2
3
4
5

"scripts": {
    "buildDev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
}

Execute the build command and the packaged file will remove redundant comments and spaces for deployment to the production environment.

This tutorial, with not much content, can be learned in about an hour, and is intended to introduce some basic concepts of webpack. webpack has more content, so you can check official documentation and Baidu for problems, and slowly get familiar with and learn it in practice.