原来webpack的loader如此简单，轻松写一个本身loader

时间 2020-04-26

标签原来 webpack loader 如此简单轻松一个本身繁體版

原文原文链接

本篇文章为webpack系列文章的第二篇，若是你对webpack一点都不了解，但愿你在看本篇文章以前先看一下往期文章。
如何使用webpack实现模块化打包【1】javascript

webpack的思想就是万物皆模块，这里的模块不只仅只是JavaScript文件，它还能够是一个文件、一张图片、一个css样式表等资源。若是咱们把这些内容所有在index.html中引入，那整个项目的代码看起来满篇都是引入的外部资源，本身都没法区分。模块化的思想能够是把某个功能设计为一个模块，咱们能够把与这个模块相关的其余资源，只在这个模块中引入，这样作能够大大的提升后期的可维护性。
可是webpack没法直接识别非JavaScript脚本文件。不过webpack提供了另一个强大之处，使其能够打包任何类型的资源文件，这就是webpack的loader机制。
css

loader 用于对模块的源代码进行转换。loader 可使你在 import 或"加载"模块时预处理文件。所以，loader 相似于其余构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 能够将文件从不一样的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至容许你直接在 JavaScript 模块中 import CSS文件！
老规矩，直接接个例子来说解html

新建index.js和base.css文件，在base.css中写一些基本样式
div {    background: pink;    text-align: center;    border-radius: 10px;}
在index.js中引入base.css
import base.css
console.log('Hello webpack loader')
在webpack.config.js中进行基本的打包配置
module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'index.js',
    },
 }

开始打包npx webpack

在控制台能够看到报错了，大概的意思是说你须要一个适当的加载器来处理这个类型的文件，目前没有配置加载器来处理此文件。这里的加载器就是咱们所须要的loader，如今咱们在JS中引入了一个CSS文件，上面已经提到过，webpack只能识别JavaScript语言，所以这里咱们须要对CSS进行转换为JavaScript，这个转换的过程固然不须要们本身起手动的编写，目前已经不少现成的加载器，咱们只须要使用npm安装便可使用。
对CSS进行处理所须要用到的是css-loader，那咱们就先来安装前端

npm install css-loader --save

安装后咱们须要告诉webpack，遇到CSS样式文件时就须要使用css-loader进行转换，这就须要在webpack.config.js中配置，在module属性中的rules中进行配置，rules是一个数组，由于咱们可能会遇到各类类型的文件，对用不一样类型的文件就要使用不一样的loader进行转换。每一项都包含test和use属性。
test指的是匹配什么文件，是一个正则表达式
use表示使用什么加载器来转换java

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'index.js',
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: 'css-loader'
            }
        ]
    }
}

熟练的再次打包

nice，so easy
兴奋的新建一个html引入打包后的index.js测试node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack-loader</title>
</head>
<body>
    <div>
        <h2>webpack-loader</h2>
    </div>
    <script src="./dist/index.js"></script>
</body>
</html>

用个人Chrome浏览器打开看看效果

并无任何样式效果，这是因为css-loader只是把CSS模块加载到JavaScript中，可是并无使用这个模块。那如何让它被使用呢，只须要在css-loader的基础上再使用style-loader便可，style-loader能够将转换后的结果经过style标签追加到页面中。
npm install style-loader --save
这一步是在css-loader转换后进行，正确的配置方法以下webpack

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
}

use能够接受一个数组，对匹配的文件会通过数组中的每个loader进行转换，这里要注意一点，转换是有顺序的，从数组的最后往前进行，所以这里的style-loader应该在css-loader的前面。
从新打包，就能够看到咱们想要的效果啦
web

咱们也能够来编写本身loader，其实loader的本质就是将接收的内容转换为另外一种内容的过程，简单的说就是接收一个值，我处理后再返回给你。正则表达式

咱们知道了它的原理后，再来实现思路就很清晰了。咱们常常会遇到md文件，md文件中采用的markdown语法，如今我写博客也开始使用markdown来写。若是直接将md文件引入页面中，必然是没法显示的，咱们须要将它转化为html文本才行。
新建一个blog.md文件npm

## 这是我本身写的一个loader
**你能看到我，全靠loader的公功劳。**

欢迎访问[个人网站](www.dengzhanyong.com)
` ` `
console.log('hello webpack')
` ` `

而后在index.js中引入，并插入到body中显示

import blog from  './blog.md'
var node = document.createElement('div')
node.innerHTML = blog
document.body.append(node)

使用webpack进行打包

控制台报错，这是咱们意料之中的，由于webpack没法识别md文件。
新建一个md-loader.js文件，这就是咱们本身的loader。

const marked = require('marked')
module.exports = source =>{
    var html = marked(source)
    return html
}

它接收一个source，这就是接收的文件内容，这里咱们须要用到一个第三方的包marked，他能够将md文本转为html文本，最后返回处理后的结果。
在webpack.config.js中进行配置，这里有两点须要注意
use可使用本地的loader
转换后的html文本须要通过html-loader再次处理
html-loader应放在./md-loader的前面，也就是后执行

{
    test: /\.md$/,
    use: [
        'html-loader',
        './md-loader',
    ]
}

如今就能够在页面中看到md文件编译后的内容了。

上面只是对loader的简单应用，它还具备如下特性：

loader 支持链式传递。可以对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。
loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 能够是同步的，也能够是异步的。
loader 运行在 Node.js 中，而且可以执行任何可能的操做。
loader 接收查询参数。用于对 loader 传递配置。
loader 也可以使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还能够将普通的 npm 模块导出为 loader，作法是在 package.json 里定义一个 loader 字段。

插件(plugin)能够为 loader 带来更多特性。

loader 可以产生额外的任意文件。

loader是webpack的最核心的机制之一，就是由于它能够经过loader去打包任何你想要加载的资源，才得以在当下的前端领域立足。

个人往网站： www.dengzhanyong.com
我的公众号：【前端筱园】