自定义一个简易的webpack loader

今天举例自定义loader转换md文件

1.创建 markdown-loader.js 文件

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

如果内容返回的不是JS内容会出现错误，所有我们应该这样写：

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

这种是直接返回JS代码，还有一种形式是把当前内容经过插件处理然后导出

我们这次用的插件是 marked 通过yarn 添加

const marked = require('marked')

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

将md文件内容处理成hrml标签，然后实现导出

最后别忘了 webpack.config.js 的配置

module: {
    rules: [{
        test: /.md$/,
        use: './markdown-loader.js'
    }]
}

还有一种方法

markdown-loader.js

const marked = require('marked')

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

webpack.config.js 

module: {
    rules: [{
        test: /.md$/,
        use: [
            'html-loader',
            './markdown-loader.js'
        ]
    }]
}