webpack Loader机制实践

loader – 将非js模块转换为webpack能识别的js模块，如把图片通过image loader转为可识别的模块（依赖图）。webpack可识别的模块是ECMAScript 模块、CommonJS 模块、AMD 模块、Assets、WebAssembly 模块，所以样式文件的导入是webpack不可识别的，需要由css-loader来转换，css-loader是个常用的loader。loader是webpack核心，通过安装各种loader依赖可以丰富webpack的用途。

下面将手撸一个markdown-loader将md文件的内容转换为html然后按js语句给导出出去，期望在js中导入后能打印输出html字符串

目标：
import about from './about.md'
console.log(about) // 期望输出的是'<h1>About</h1><p>this is about.</p>'

step1.

// about.md
# about
## this is about.

step2.新建一个markdown-loader.js

loader是一个函数，接收源文件的内容，返回处理后的结果。返回的应该是js代码的字符串格式

//loader的基本格式
module.exports = (src) =>{
  var a = 'console.log(\'333\')'
  return a
}

step3.将md转为html

可使用marked依赖。写js导出语句的时候使用JSON.stringify可以将引号转义，避免code出错

const {marked} = require('marked') // 注意导入方式
module.exports = (src) =>{
  const html = marked(src)
  const code = `module.exports=${JSON.Stringify(html)}`
  return code
}

step4.在js文件中导入md并展示内容

创建个div元素并修改其innerHTML为loader转换后的html

import about from './about.md'
let showdiv = document.createElement('div')
showdiv.className = 'md'
document.body.appendChild(showdiv)
document.getElementsByClassName('md')[0].innerHTML = about
//也可以创建元素后修改html再appendChild

step5. 修改webpack配置文件

给.md文件设置loader

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test: /\.md$/,
        use: './markdown-loader.js'
      }
    ]
  },
  mode: 'development'
}
module.exports=config