webpack如何写一个markdown-loader？

相关文章

[必看！！！]此篇由浅入深介绍webpack如何自定义一个loader
b站视频讲解（磨刀不误砍柴工--前置知识）
b站视频讲解（实现babel-loader）
b站视频讲解（实现markdown-loader）

实现一个markdown的Loader

markdown展示

我们webpack是无法打包.md文件的。在这个过程中会进行报错，如：

因为我们在index.js文件里引入了index.md文件：

import './index.md' // 这里引入一个markdown的文件
console.log('src/index.js')
const name = 'colin'

const x = () => {
  console.log('---x')
}
x()

index.md文件：

# webpack study

## loader
+ 这里是md-loader

```js
const x = {
	name: 'ckj' 
}

#### 创建md-loader，并初步配置
> md-loader.js

```javascript
module.exports = function(ctx) {
  return ctx
}

webpack.config.js

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

了解marked并使用

先下载marked

npm i marked -D

在md-loader.js文件里使用

const {marked} = require('marked')// 引用
module.exports = function(ctx) {

  // 转换
  const content = marked(ctx)
  console.log(content)
  return content
}

发现已经处理好我们的md文件特殊语法了！ 但打包还是没有成功......

返回的结果必须是模块化的内容

所以，我们需要将我们生成的html内容插进JavaScript里，并导出

const {marked} = require('marked')
module.exports = function(ctx) {

  // 转换
  const content = marked(ctx)

  // 返回的结果必须是模块化的内容
  const innerContent = "`" + content + "`"
  const moduleContent = `var code = ${innerContent}; export default code;`
  return moduleContent
}

index.js文件引入index.md

import code from './index.md'
console.log(code)

console.log('src/index.js')
const name = 'colin'

const x = () => {
  console.log('---x')
}
x()

所以整个流程就是: 先配对md文件 -> 告诉他使用md-loader -> md-loader去转换代码为html -> html转换为模版导入 -> 最终打包

这个时候我们可以去看打包好的代码里面我们转换后的代码 当然我们需要在webpack.config.js文件里将devtools设置为false（为了看的清晰）

module.exports = {
  mode: 'development',
  devtool: false,
  entry: "./src/index.js",
}

bundle.js源码里的代码：

使用HtmlWebpackPLugin来查看结果

先安装

npm i html-webpack-plugin -D

webpack.config.js 导入使用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引用

module.exports = {
  mode: 'development',
  devtool: false,
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  resolveLoader: {
    modules: ['node_modules', './loader']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.md$/,
        use: 'md-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin() // 注册使用
  ]
}

index.js插入code

import code from './index.md'

console.log('src/index.js')
const name = 'colin'

const x = () => {
  console.log('---x')
}
x()
document.querySelector('body').insertAdjacentHTML('beforeend', code) // 插入到body上

// 或者 document.body.innerHTML = code

这个时候打包，会自动生成一个html文件，我们启动html文件预览，控制台也能打印出我们经过转换后的md文件源代码

改变样式

安装css-loader和style-loader

npm i css-loader style-loader -D

webpack.config.js配置loader

 module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.md$/,
        use: 'md-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader'] // 先引入style-loader
      }
    ]
  },

index.css编写代码块样式，并引入index.js

pre{
  background: #eff0f0;
  padding: 1rem;
  border-radius: 8px;
}

打包->

第三方库-高亮代码块！

这里下载需要助理版本！！

npm i marked@7.0.5 -D // 退版本
npm i highlight.js // 高亮js包

md-loader.js引入highlight并配置

const {marked} = require('marked')
const hljs = require('highlight.js')
module.exports = function(ctx) {
  // marked解析前 设置高亮标识
  
  marked.setOptions({
    highlight: function(code, lang){  // lang是语言，code是代码块
      return hljs.highlight(lang, code).value
    }
  })

  // 转换
  const content = marked(ctx)

  // 返回的结果必须是模块化的内容
  const innerContent = "`" + content + "`"
  const moduleContent = `var code = ${innerContent}; export default code;`
  return moduleContent
}

打包看调试工具-> 可以看到分成了几个模块，那我们就可以拿到选择器做css了？不做过多解释咯~

或者！在index.css文件里引入highlight库带给我们的默认样式。其实库内还有需要样式

import 'highlight.js/styles/default.css'

比如这个好看的样式就是我们github的样式

import 'highlight.js/styles/github.css' // 即可