从零开始手写一个简单的 loader（二）

这是关于 webpack 的一些扩展。

从零开始手写一个简单的 loader（一） 里面已经生成了 html 字符串并且渲染到了页面。但是我们发现其样式无美感，那这一期我们增加一些样式，将生成的 html 渲染的像咱们博客中的那样。

首先我们需要的 loader 是 css-loader 和 style-loader，我们开始安装这两个依赖。
css-loader 用于将 css 可以模块化的引入，并将其转换为 js 代码，style-loader 用于将上一步生成的 js 中包含的 css，生成可用的样式并且，通过生成 style 标签插入到 head 标签中。

  • 安装依赖
1
cnpm install --save-dev css-loader style-loader

我们接着来配置 webpack.config.js 文件，在 module 的 rules 里再加上一个匹配项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
rules: [
  {
    test: /\.md$/,
    use: [
      './loader/md2html-loader.js'
    ]
  },
+  {
+    test: /\.css$/,
+    use: [
+      'style-loader', 'css-loader'
+    ]
+  }
]
  • 创建 css 文件

紧接着我们在 src 下创建一个 index.css 文件，添加如下 css 样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
pre {
  display: block;
  background-color: #282c34;
  color: #fff;
  padding: 20px 24px;
  text-align: left;
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  border: 1px solid transparent;
  line-height: 1.4;
  transition: all 0.3s;
  font-size: 14px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 13px 0;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
}

pre code {
  font-family: inherit;
  color: #fff;
  padding: 0;
}

code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  color: palevioletred;
}
  • 引入样式文件

然后我们回到 main.js 里将 index.css 引入：

1
import "./index.css";

现在我们再去终端运行 npx webpack，再刷新页面，发现生成的 html 已经被我们加上了样式。

最终渲染的页面

截至目前我们已经完成了一个可以生成 html 的 loader，并且已经为其加上了样式。

我们目前用的是 style-loader 是将生成的 css 通过 style 的方式插入到 head 标签中。其实我们还有一种办法，将 css 提取出来，作为单个文件通过 link 标签加载。话不多说，我们继续。

  • 提取 css

要提取 css 样式文件，webpack4.0 之后用的插件叫: mini-css-extract-plugin
我们来安装这个插件:

1
cnpm install --save-dev mini-css-extract-plugin

因为 style-loader 和 mini-css-extract-plugin 插件不能共存，所以我们需要删除 webpack 中之前配置的 style-loader，添加 mini-css-extract-plugin，具体修改如下：

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module: {
  rules: [
    {
      test: /\.md$/,
      use: [
        './loader/md2html-loader.js'
      ]
    },
    {
      test: /\.css$/,
      use: [
+        MiniCssExtractPlugin.loader, 'css-loader'
      ]
    }
  ]
},
plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin(),
+  new MiniCssExtractPlugin()
]

我们再去终端运行 npx webpack，刷新页面发现样式没改变再去看开发人员选项，发现样式文件目前是通过 link 标签引入的，证明我们的提取 css 配置是生效的。

控制台标签元素

至此，我们一个简单的 loader 就全部完成了。