webpack快速入门2021 #

本篇教程适用于webpack初学者。这个也是我自己学习webpack时，整理的一些笔记，适用于新手。本教程源码地址：https://github.com/pengfeiw/webpack-tutorial

一.什么是webpack #

作为一个javascript前端开发者，肯定都知道webpack这个东西，也知道各种各样的module。webpack作为一个打包工具，就是将各种各样的模块捆绑（打包）在一起。支持的module有：

CommonJS
AMD
CSS import
Images url
Es module

webpack将所有模块捆绑在一起，使其运行。

二.重要概念 #

首先重点提一下几个相对比较重要也是最常用的东西。

入口文件（entry point） #

webpack工作开始的地方，就是一个js文件。webpack通过这个文件内的import，收集其他模块文件，在通过其他模块文件内的import语句，收集其他依赖，最后将所有模块文件打包到一起，形成一个整体可运行的代码。默认的入口文件是 src/index.js。

输出文件（output） #

output就是webpack通过build过程打包后形成的文件。默认的输出文件夹为根目录下的dist/文件夹。

加载器（loaders） #

loaders是一些第三方扩展包，可以帮助webpack处理加载各种类型的文件。例如有处理css、image文件的loaders。如果没有loaders，webpack本身是不支持css文件的。

插件（plugins） #

plugins也是第三方插件，它可以改变webpack的工作方式，例如有些插件可以设置webpack的环境变量。

模式（mode） #

webpack有两种工作方式：development（开发模式）和production（生产模式）。主要的区别就是production模式下，产生的捆绑包（文件）更小，去掉了在运行下无关的注释，空格等等。这样可以加快用户加载代码的速度。

三.实践 #

1.初始化项目 #

现在，我们通过实践一步步的了解webpack的工作过程。首先新建一个目录，并通过npm init -y初始化项目。

mkdir webpack-tutorial
npm init -y

打开刚才创建的package.json，添加如下内容：

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

并安装如下依赖：

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

然后执行刚才添加的start命令：

yarn start

运行出错。当我们执行start命令后webpack给我们报错了：Module not found: Error: Can't reolve './src' 。不用怕，还记得我们之前提到的入口文件吗，这个错误产生的原因就是没有找到入口文件。我们只要添加入口文件就可以了。创建src文件夹，并在src文件夹下添加index.js文件，输入以下内容：

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

然后再次执行start命令，可以看到webpack正常运行，并生成了一个dist文件夹，dist文件就是webpack的输出文件，入口文件和输出文件的位置都是可以通过配置更改的。因为我们的start命令，没有指定webpack的mode，所以webpack将以production模式运行。我们修改start命令，将模式改为development，修改package.json中的start命令：

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

再次运行start命令，webpack将以development模式运行。

2.webpack配置文件，指定输入输出 #

前面提到，我们可以更改webpack的配置的。为了配置webpack，我们需要在根目录创建一个webpack.config.js文件。这是一个js文件，所以我们可以在里面写任意可运行的js代码。首先更改入口文件和出口文件：

// 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")
    }
};

entry字段可以用来修改入口文件，上面的代码将webpack入口文件改为src/main.js。output字段用于修改输出文件位置，我们将输出文件目录改为build/。将src目录下的index.js文件重命名为main.js，运行start命令，可以看到webpack输出目录build。

3.添加html页面 #

为了将webpack打包后的文件，用script标签嵌入到html文档中，我们需要借助第三方plugins扩展：html-webpack-plugin 。上面介绍过plugin，plugin是改变webpack工作方式的第三方扩展。html-webpack-plugin的作用就是改变webpack的工作方式，使webpack可以将打包后的js文件，添加到html页面的<script>标签中，这样打开html，就可以运行我们的js脚本。首先，安装插件：

yarn add html-webpack-plugin --dev

然后，更改webpack.config.js文件：

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

上面的代码指示webpack加载public/index.html，所以创建public目录，并添加index.html文件，内容如下：

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

运行yarn start，查看结果。此时我们的build目录下会出现一个index.html文件，文件内容如下：

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

与原html文件相比，增加了一个<script>标签，标签内容就是webpack打包后的js文件。

所以，我们可以知道html-webpack-plugin的功能：

加载html文件。
将webpack打包后的js文件，通过script标签添加到html文件中。

4.通过webpack启动本地服务 #

作为开发者，肯定会用到本地服务，webpack提供了development server，可以很方便的启动一个本地服务，方便开发者进行开发工作。首先我们需要安装webpack-dev-server包。

yarn add webpack-dev-server --dev

细心的朋友已经注意到，我在安装这些ku的时候都会添加--dev字段，表示这些包只在开发模式中使用，方便开发工作的，在生产环境下并没有作用。安装了这个包，是可以直接使用，首先我们更改package.json中的命令如下：

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

更改后，打包命令改为buildDev，启动本地服务器命令为start。执行yarn start。会在本地8080端口启动一个本地服务。打开http://localhost:8080，会显示index.html页面。

5.加载css #

为了加载css，我们需要用到webpack loaders。webpack loaders是为了处理各种各样的模块和文件。为了加载css文件，我们需要安装至少如下两个loaders:

css-loader: 让我们可以使用import语句导入css文件。
style-loader: 将css样式插入到html dom中。

安装：

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

配置webpack.config.js，我们需要添加module字段，并增加rules, module表示该插件处理的是各种模块文件（ts、css、less等），rules对应不同的文件类型使用不同的loaders。

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

为了测试loaders是否起作用，我们在src目录下增加style.css文件：

span {
    color: green;
}

更改main.js文件，导入style.css:

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

启动webpack server服务，打开localhost:8080，可以看到我们的字变成了绿色，表示成功加载了css文件。

注意：loaders的顺序很重要，webpack加载loaders的顺序是从右到左，所以下面的loaders配置是无效的：

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

因为style-loader负责将样式插入到html中，程序总是先执行js代码，所以首先执行的是css的import，所以顺序错误了。

同样，我们可以增加SASS文件，只需要增加sass-loader，这个留着大家后面自己尝试。

6.加载es modules #

webpack最重要的功能就是加载es modules。到这里大家应该知道加载es modules，我们应该也需要增加对应的loaders，但是其实webpack已经自带了加载es modules的功能。我们可以直接使用。新建src/component.js文件，写入以下代码：

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

然后更改src/main.js:

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

启动服务，打开浏览器控制台，有如下输出，表示webpack es modules正常加载。

7.production模式 #

前面说过webpack有两种模式：development和production模式。我们可以指定webpack打包的方式，修改package.json的scripts字段：

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

执行build命令，打包后的文件会删除冗余的注释和空格用于部署到生产环境。

这个教程，内容并不多，大概一个小时就可以学完，目的是为了介绍webpack的一些基本概念。webpack内容比较多，遇到问题可以查看官方文档和百度，在实践中慢慢熟悉和学习。

（完）