Loader 作為 Webpack 的核心機(jī)制，內(nèi)部的工作原理卻非常簡單。接下來我們一起來開發(fā)一個自己的 Loader，通過這個開發(fā)過程再來深入了解 Loader 的工作原理。
這里我的需求是開發(fā)一個可以加載 markdown 文件的加載器，以便可以在代碼中直接導(dǎo)入 md 文件。我們都應(yīng)該知道 markdown 一般是需要轉(zhuǎn)換為 html 之后再呈現(xiàn)到頁面上的，所以我希望導(dǎo)入 md 文件后，直接得到markdown 轉(zhuǎn)換后的 html 字符串。

首先來說一下實現(xiàn)的簡單步驟

1、新建一個項目，并且在命令行中初始化項目   npm init -y2、安裝對應(yīng)版本的 webpack webpack-cli(命令行工具) "webpack""webpack-cli"3、安裝對應(yīng)版本的 marked 庫4、在 src 目錄下創(chuàng)建 about.md 文件,并寫入 markdown 語法內(nèi)容5、在 src 目錄下創(chuàng)建 main.js 文件，將 about.md 文件引入6、在根目錄下創(chuàng)建markdown-loader.js 文件，寫入自己配置 loader 的邏輯7、在根目錄下創(chuàng)建一個 webpack.config.js 配置文件，并設(shè)置loader8、在命令行中運(yùn)行 webpack 來打包9、打包完成后，生成的 bundle.js 文件將 markdown 文件轉(zhuǎn)換成 html 字符串，可以被瀏覽器執(zhí)行

?下面是具體步驟

一、新建項目

1、新建一個文件夾，然后用 vs-code 打開新建好的文件夾，如：

2、打開終端，輸入命令對項目進(jìn)行初始化（默認(rèn)這里認(rèn)為已經(jīng)安裝好了node.js）

npm init -y

運(yùn)行完這個命令之后，項目中會新增一個?package.json?的文件

二、安裝 webpack

打開終端，在你的項目中安裝?Webpack 和 Webpack CLI（命令行工具），如：

npm install --save-dev webpack webpack-cli

三、安裝 marked

這里需要安裝一個能夠?qū)?Markdown 解析為 HTML 的模塊，叫作 marked。

npm install marked

安裝完成后，項目中的 package.json 文件中就會出現(xiàn)如下配置

?四、創(chuàng)建 markdown 文件

創(chuàng)建一個 about.md 文件，并在文件中寫入如下代碼：

五、創(chuàng)建入口文件

創(chuàng)建一個 main.js 文件，并在文件中導(dǎo)入 about.md 文件，如下：

六、配置自己的 markdown-loader

在根目錄下創(chuàng)建一個 markdown-loader.js 文件，并在文件中配置如下代碼

const marked = require('marked')
module.exports = source => {const html = marked.parse(source)const code = `module.exports = ${JSON.stringify(html)}`return code
}

七、配置 webpack

在項目根目錄下創(chuàng)建一個?webpack.config.js?配置文件，并做如下配置

const path = require('path');module.exports = {entry: './src/main.js', // 你的入口文件output: {path: path.resolve(__dirname, 'dist'), // 輸出的目錄filename: 'bundle.js' // 輸出的文件名},module: {rules: [{test: /\.md$/,exclude: /node_modules/,use: ['./markdown-loader']}]},mode: 'none'
};

八、打包

在終端運(yùn)行 webpack 來打包應(yīng)用程序

npx webpack

九、運(yùn)行

打包完成后，生成的 bundle.js 文件將 markdown 文件轉(zhuǎn)換成 html 字符串，可以被瀏覽器執(zhí)行。

這里只是對它做了打印處理

以上就是開發(fā)一個可以加載 markdown 文件的加載器 loader 的全部代碼了，這只是 webpack 的一個應(yīng)用，實際開發(fā)過程中我們還可以通過自己的業(yè)務(wù)需求配置自己的 loader，更多關(guān)于 webpack 的應(yīng)用我在后續(xù)也會持續(xù)更新，有興趣的小伙伴可以關(guān)注一下！！！