webpack 从入门到放弃！( 五 ) _webpack中文文档

此时我们希望返回的代码是通过 . 导出这段 HTML 字符串，这样外界导入模块时就可以接收到这个 HTML 字符串了。如果只是简单地拼接，那 HTML 中的换行和引号就都可能会造成语法错误，所以我这里使用了一个小技巧，具体操作如下所示：
// ./markdown-loader.jsconst marked = require('marked')module.exports = source => {// 1. 将 markdown 转换为 html 字符串const html = marked(source)// html => 'Aboutthis is a markdown file. '// 2. 将 html 字符串拼接为一段导出字符串的 JS 代码const code = `module.exports = ${JSON.stringify(html)}`return code // code => 'export default "Aboutthis is a markdown file. "'}
先通过 JSON.() 将字段字符串转换为标准的 JSON 字符串，然后再参与拼接，这样就不会有问题了。
我们回到命令行再次运行打包，打包后的结果就是我们所需要的了。
除了 . 这种方式，还允许我们在返回的代码中使用 ES的方式导出，例如，我们这里将 . 修改为，然后运行打包，结果同样是可以的，内部会自动转换 ES代码。
// ./markdown-loader.jsconst marked = require('marked')module.exports = source => {const html = marked(source)// const code = `module.exports = ${JSON.stringify(html)}`const code = `export default ${JSON.stringify(html)}`return code }
多个的配合
我们还可以尝试一下刚刚说的第二种思路，就是在我们这个 - 中直接返回 HTML 字符串，然后交给下一个处理。这就涉及多个相互配合工作的情况了。
我们回到代码中，这里我们直接返回解析后的 HTML，代码如下所示：
// ./markdown-loader.jsconst marked = require('marked')module.exports = source => {// 1. 将 markdown 转换为 html 字符串const html = marked(source)return html}
然后我们再安装一个处理 HTML 的，叫作 html-，代码如下所示：
// ./webpack.config.jsmodule.exports = {entry: './src/main.js',output: {filename: 'bundle.js',},module: {rules: [{test: /\.md$/,use: ['html-loader','./markdown-loader']}]}}
安装完成过后回到配置文件，这里同样把 use 属性修改为一个数组，以便依次使用多个。不过同样需要注意，这里的执行顺序是从后往前，也就是说我们应该把先执行的 - 放在后面，html- 放在前面。
通过以上的尝试发现了的内部原理非常简单，就是负责资源文件从输入到输出的转换，除此之外还了解了其实是一种管道的概念，我们可以将此次的结果交给下一个去处理，通过多个完成一个功能，例如css-与style-的配合。
插件
插件机制是的另外一个重要的核心特性，插件机制的目的是为了增强在项目自动化构建方面的能力。我们都知道就是负责完成项目中各种各样资源模块的加载，从而实现整体项目的模块化，而则是用来解决项目中除了资源模块打包以外的其他自动化工作，所以说的能力范围更广，用途自然也就更多。
几个插件最常见的应用场景：
总之，有了的几乎“无所不能” 。借助插件，我们就可以轻松实现前端工程化中绝大多数经常用到的功能，这也正是很多初学者会认为 “ 就是前端工程化，或者前端工程化就是 ” 的原因。
插件开发
通过前面的介绍，我们知道相比于，插件的能力范围更宽，因为只是在模块的加载环节工作，而插件的作用范围几乎可以触及工作的每一个环节。
那么，这种插件机制是如何实现的呢？其实说起来也非常简单，的插件机制就是我们在软件开发中最常见的钩子机制。