详解webpack loader和plugin编写

下面我将详细讲解“详解webpack loader和plugin编写”的完整攻略。

什么是 Webpack Loader 和 Plugin

Webpack 可以将多个资源文件（js、css、图片等）经过打包，最终输出到指定目录。其中，Webpack Loader 和 Plugin 是实现这种打包的两个重要概念。

• Loader：用于加载某些资源文件，并进行一些预处理和转换，例如将 ES6/ES7 语法转换成 ES5，将 TypeScript 转换成 JavaScript，将 less/sass 转换成 css 等。

• Plugin：插件可以用于执行范围更广的任务，包括将 bundle 中的一些引用关系拆分成单独的文件、压缩输出文件、复制一些文件到输出目录等。

理解了 Loader 和 Plugin 的概念，我们就可以开始编写我们自己的 Loader 和 Plugin 了。

编写 Loader

下面，我会给出一个简单的 Loader 示例，它可以将 markdown 文件转换成 HTML 格式，并返回 HTML 字符串。

首先，我们需要在项目中安装 markdown 完成器：

npm install markdown-it --save-dev

然后，来看一下 Loader 的源代码：

const { getOptions } = require('loader-utils');
const marked = require('markdown-it')();
module.exports = function(source) {
  const options = getOptions(this);
  return marked(source);
}

具体分析一下：

• getOptions 用于获取 Loader 的 options；
• marked 是一个 markdown 转换工具；
• Loader 的核心就是函数，接收 source 作为参数，返回用 marked 转换过的 HTML 字符串。

接下来，在 Webpack 的配置文件中配置 Loader：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.md$/,
      use: [
        {
          loader: path.resolve(__dirname, 'md-loader.js'),
          options: {
            // some options
          }
        }
      ]
    }]
  }
}

这里的配置是在 module.rules 下配置的，表示遇到 .md 文件时，使用 md-loader.js 这个 Loader。

编写 Plugin

下面，我会给出一个简单的 Plugin 示例，它可以在打包结束的时候弹出一个对话框，提示打包结束。

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', stats => {
      alert('打包结束！');
    })
  }
}
module.exports = MyPlugin;

具体分析一下：

• MyPlugin 是一个类，它的 apply 方法会在 Webpack 编译时被自动调用，接收一个 compiler 作为参数；
• 在 compiler.hooks.done.tap 中绑定了一个 'MyPlugin' 名称的插件，当 Webpack 编译结束时执行这个函数，弹出提示框。

然后在 Webpack 配置文件中配置插件：

const MyPlugin = require('./my-plugin.js');
module.exports = {
  // ...
  plugins: [
    new MyPlugin()
  ]
}

这里的关键就是在 plugins 数组中添加了一个 MyPlugin 的实例。

总结

以上就是关于 Webpack Loader 和 Plugin 的编写的完整攻略了。希望这篇文章能对你有所帮助。

在实际开发过程中，我们可以结合自己的业务需求，编写出更加复杂和实用的 Loader 和 Plugin。