这是重新学习webpack的第二篇文章，之前我也写过一篇关于webpack的文章。问题是过去快半年了，~~我已经将webpack忘得差不多，~~回头一看那篇文章完全是一头雾水，也没有办法，那个时候我才刚刚开始写前端方面的博客，对于知识梳理、文字表达都有一些欠缺，啪啪啪一下扔出来几千字，全是重点，没有任何过渡性的语言，看个一会就没什么兴趣。

综上所述，本次决定给webpack写一个比较详细的系列文章，目的是如果我半年后又忘记了webpack的具体内容，再来翻阅文章，不会像这次一样一头雾水。

• 前端最常用的打包工具webpack（一）-初识篇。

在前一篇文章中，我们已经可以打包js文件，但是在一个工程项目中，我们不仅有js文件，还有其它类型的文件，比如.css、.scss文件，而这些文件跟js文件不同，如果使用webpack的默认打包，则无法进行识别这些文件，从而报错。

我们在项目根目录下创建一个src文件夹，然后在里面创建一个style.css文件，写上如下代码

1
* {
2
    padding: 0;
3
    margin: 0;
4
    box-sizing: border-box;
5
}

接着我们在main.js中引入：

1
import "./src/style.css";  // 引入样式文件
2

3
function add(x, y) {
4
  return x + y;
5
}
6

7
console.log(add(1, 2));

这种引入方式在使用前端框架时会经常用到，那么这个时候我们再运行一次打包指令：

1
webpack ./main.js -o ./build/ --mode=development

可以看到报错了，提示模块解析失败，因为默认情况下，webpack是不认识.css这一类的文件，所以也就无法将它打包到项目中，那么如何才能将它打包呢？

接下来我们就要说到webpack的配置文件webpack.config.js。

1. 配置文件

在项目的根目录下创建一个webpack.config.js文件。

1
module.exports = {};

注意：因为webpack是使用Nodejs写的，所以需要使用CommonJS语法进行导出，而不能使用我们常用的es6 modules（export default {};）形式进行导出。

webpack ./main.js -o ./build/ --mode=development这一段在终端中运行的代码，如果通过webpack.config.js配置来实现的话就需要写成下面这个样子：

1
const { resolve } = require("path");
2

3
module.exports = {
4
  // 入口文件
5
  entry: "./main.js",
6
  // 输出文件
7
  output: {
8
    // 输出路径
9
    path: resolve(__dirname, "build"),
10
  },
11
  // 输出模式
12
  mode: "development",
13
};

然后在终端中运行：

1
webpack

即可以根据配置webpack.config.js文件来打包。

说到这里你是否觉得下面这种方式比起上面终端中要敲webpack ./main.js -o ./build/ --mode=development这一坨要简便多了？

其实webpack ./main.js -o ./build/ --mode=development存在是有它的道理的，这个我们放在后面进行讲解为什么会存在这种形式的打包方式，并且它还是一个非常常用的打包方式。

2. 打包CSS

在终端下载两个关于处理CSS的loader：

• style-loader：创建style标签，将js中的样式资源进行插入，添加到head中生效。
• css-loader：将css文件编译成CommonJS模块加载到js中，里面内容是样式字符串。

1
npm install style-loader css-loader --save-dev

然后将下面的配置写入webpack.config.js文件。

1
const { resolve } = require("path");
2

3
module.exports = {
4
  // 入口文件
5
  entry: "./main.js",
6
  // 输出文件
7
  output: {
8
    // 输出路径
9
    path: resolve(__dirname, "build"),
10
  },
11
  module: {
12
    rules: [
13
      // 详细的loader配置
14
      {
15
        // 用正则表达式匹配文件类型，下面就是匹配以.css结尾的文件，并且将它们使用下面的loader解析。
16
        test: /\.css$/,
17
        use: [
18
          // 创建style标签，将js中的样式资源进行插入，添加到head中生效
19
          "style-loader",
20
          // 将css文件编程CommonJs模块加载到js中，里面内容是样式字符串
21
          "css-loader",
22
        ],
23
      },
24
    ],
25
  },
26
  // 输出模式
27
  mode: "development",
28
};

可以看到上面的配置文件多了一个module对象，并且在其下面有一个rules数组，在这个rules数组中就是配置loader相关的东西。

• test：用正则表达式匹配文件类型。
• use：需要使用的loader。

use下面的loader执行顺序是从右到左（从下到上）。这个非常重要，如果写反了可能会导致无法正确进行打包。

这个时候我们再运行webpack打包一次，显示打包成功，然后再到打包后的文件中就可以看到最终的输出结果。

3. 打包SASS

负责将sass转换为css的两个loader是：sass-loader、sass。

现在大部分项目已经使用sass替代node-sass了，因为node-sass之前依赖Python，并且它还有一部分文件来自于GitHub，因为国内网络环境的原因，导致经常下载node-sass时出错，后来官方推出了编译速度更快的sass替代node-sass。

下载两个loader：

1
npm install sass-loader sass --save-dev

配置代码：

1
{
2
  test: /\.(scss|sass)$/,
3
  use: [
4
    "style-loader",
5
    "css-loader",
6
    "sass-loader",
7
  ],
8
},

简单的说就是将.scss或.sass文件转换为css，然后将css编译为webpack支持的文件类型。

4. HTML

HTML文件有些许的不同，因为HTML是不用通过webpack进行编译，而是直接输出.html文件，然后通过浏览器进行解析。

所以针对HTML文件，我们不需要使用loader，但是要使用一个插件来默认创建一个HTML文件，然后引入打包后的js文件。

• html-webpack-plugin：默认会创建一个空的HTML，自动引入打包输出的所有资源。

首先需要进行安装该插件：

1
npm install html-webpack-plugin --save-dev

在module对象下面新增：

1
// 引入html-webpack-plugin插件
2
const HtmlWebpackPlugin = require("html-webpack-plugin");
3

4
// 在module对象下面新增
5
plugins: [new HtmlWebpackPlugin()],

这个时候再运行打包指令webpack。

可以看到在build目录下输出了一个index.html文件，并且引入了main.js。

同时我们也可以自行配置HTML文件模板样式。

在项目的根目录下创建一个public文件夹，在下面创建一个index.html文件。

重新配置一下webpack。

1
plugins: [
2
  new HtmlWebpackPlugin({
3
    template: resolve(__dirname, "./public/index.html"),
4
  }),
5
],

可以看到，HTML文件已经应用了我们给出的模板，并且也引入了main.js文件。

5. 处理图片资源

引入依赖：

1
npm install url-loader file-loader --save-dev

url-loader依赖file-loader，设置配置如下：

1
{
2
  test: /\.(jpg|png|gif)$/,
3
  use: [
4
    {
5
      // url-loader依赖file-loader。
6
      loader: "url-loader",
7
      options: {
8
        // 图片大小小于8kb，就会被编译成base64打包在项目中
9
        // 优点：减少请求数量（减轻服务器压力）。
10
        // 缺点：图片体积会更大。
11
        // 一般只将8~12kb的图片进行处理
12
        limit: 8 * 1024,
13
      },
14
    },
15
  ],
16
},

根据上面的配置，小于8kb的图片就会被编译成为base64。

然而，如果在HTML中有引入图片文件，例如：

打包后引入图片的地址会原模原样的进行输出，但是打包后的目录结构发生了变化，根本就找不到这个文件夹，所以引入也是无效的，那么这种情况如何处理呢？

处理方式：引入html-loader。

1
{
2
  test: /\.html$/,
3
  loader: "html-loader",
4
},

再次尝试进行打包，发现输出的文件已经产生了变化

如果觉得打包后的文件名太长，可以设置url-loader的name属性。

1
{
2
  test: /\.(jpg|png|gif)$/,
3
  use: [
4
    {
5
      // url-loader依赖file-loader。
6
      loader: "url-loader",
7
      options: {
8
        limit: 8 * 1024,
9
        // 设置名称长度，保留hash前10位，ext表示原有后缀名
10
        name: "[hash:10].[ext]",
11
      },
12
    },
13
  ],
14
},

6. 其它资源

如果有一些不希望webpack打包的资源，我们可以将它排除掉，直接放到项目中去。

1
{
2
  // 需要排除的文件类型
3
  exclude: /\.(html|css|js|scss|sass|png|jpg|gif)/,
4
  loader: "file-loader",
5
},

7. 最后

经过本次学习，我已经成功明白如何将除了js外的其它文件通过webpack进行打包，那么本篇文章就到这里，下一篇文章就介绍如何在开发环境将项目跑在webpack创建的服务器上，并且处理css和js文件的兼容性问题。