webpack入门 —— 学会自己开发markdown-loader

作为程序员，百忙的业务中也要抽空来学习其他技术，这不，最近感觉自己对webpack的理解真的太少，又得知提高工作效率，离不开webpack；成为中高级前端工程师，webpack也必不可少，因此，重新webpack来入门，相信会收获写新知识。

webpack 基础搭建

创建webpack-demo文件，引入webpack和webpack脚手架

npm install webpack webpack-cli --save-dev

初始化

npm init

如果想使用默认配置，则

npm init -y

在文件根目录创建src文件，并且在根目录创建 webpack.config.js （名字必须一致，除非你另外配置），最后的路径形式为

创建文件和配置

根据我们这次的目标，在src中创建两个文件，分别为 about.md 和 main.js

// ./src/about.md
# About

this is Markdown file

// ./src/main.js
import about from './about.md'

console.log(about);

因此只要我们最后在控制台能成功打印出 about.md 形成的 html代码就是成功了 ；
首先在根目录创建 markdown-loader.js
webpack.config.js配置如下：

import path from 'path';			// node.js中的path 模块

module.exports = {
    entry: './src/main.js',			// 入口文件
    output: {						// 出口
        filename: 'bundle.js',		// 出口文件
        path: path.resolve(__dirname, 'dist')		// 出口文件地址
    },
    module: {						// 模块
        rules: [					// 模块规则
            {						// .md结尾的文件使用markdown-loader规则
                test: /\.md$/,
                use: [
                    './markdown-loader'
                ]
            }
        ]
    }
}

初试loader功能

此时，还有markdown-loader.js还没写，我们先测试一下：

module.exports = source => {
	console.log(source);
	return 'hello loader~'
}

运行

npx webpack

虽然打印出来了，但是报错，表示需要一个loader，原因是最后返回的需要是js代码；
方法有两个：
1、在markdown-loader.js中，最后的return处给为

return "console.log('hello loader~')"

虽然完成了，但是这一点也不帅，看方法二

2、在找一个合适的loader，来处理我们得到的数据（好看的都选这个~~）

添加另一个loader解析返回值

安装一个将值解析为html模块的loader —— marked

npm install marked

然后导入markdown-loader.js中

const marked = require('marked');

module.export = source =>{
	const html = marked(source)
	const code `export default${JSON.stringify}`  
	// 防止换行符 引号等符号造成错误 所以用JSON的字符串化方法
	retunr code
}

至此就完成了markdown-loader,但是还没结束~~~

多个loader配合使用

安装html-loader 直接返回html

npm install html-loader

const marked = require('marked');

module.exports = source => {
    // 引入html-loader 实现多个loader配合
    const html = marked(source)
    return html
}

因此，webpack.config.js的loader使用需要变成数组形式

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.md$/,
                // 下面的use 需要根据运行的顺序 从下到上
                // 需要先运行下面的loader 至下向上运行
                use: [
                    'html-loader',
                    './markdown-loader'
                ]
            }
        ]
    }
}

最后，就能生成对应的html

到此，我们自己开发的markdown-loader就完成了，这使我们更加了解了webpack中loader的运行方式，webpack之路才开始，冲鸭~~~