最近在学习webpack相关知识,今天记录一下自己学的第一个Loader—将Markdown文本显示在网页上。
md文件
## 这是我自己写的一个loader
**你能看到我,全靠loader的公功劳。**
` ` `
console.log('hello webpack')
` ` `
index.js:添加至页面
import blog from './blog.md'
var node = document.createElement('div')
node.innerHTML = blog
document.body.append(node)
Loader:mdToHtml.js文件
const marked = require('marked')
function mdToHtml(md){
var result = marked(md)
return result
}
module.exports = mdToHtml
// Loader本质上是一个函数,所以需要暴露函数。
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const { resolve } = path
module.exports = {
entry: resolve(__dirname, 'src/index.js'),
// './src/index.js',
// 等于{main:'./src/index.js'}
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
// './dist/main.js',
mode: 'development',
module: {
rules: [
{
test:/\.md$/,
use: [
'html-loader',
'./mdToHtml.js'
//resolve(__dirname, 'mdToHtml.js')
]
//需要注意:要想展示在html上,必须要使用html-loader
//可以直接写Loader的路径文件,但是其实是推荐绝对路径。
}
]
},
plugins: [
// 向页面插入打包的js/css代码
new HtmlWebpackPlugin({
template: 'public/index.html'
}),
// 打包前,先清除之前的打包文件夹
new CleanWebpackPlugin(
['dist']
)
}