使用 Webpack 动态打包文件夹

各式各样功能强大的小语言是我厂机器编程的特色，为了让更多的同学提前感受到 DSL 的威力，我们开发了 demo 应用：https://demo.openresty.com.cn/。

Demo 里面，需要添加一些范例代码，方便用户直接体验。这些代码，可以通过后端 API 获取，也可以直接编译到前端代码里。目前范例很少，直接打包到一起应该是最简单的做法。

但是如何打包是个问题。经过一些研究，我觉得这样做好：

1. 负责小语言的同事直接把范例写在项目仓库里，Edgelang 就用 .edge 扩展名，Navlang 就用 .nav 扩展名
2. 前端在 webpack 里实现一个 requireAll 的功能，把所有代码当成纯文本用 raw-loader 加载进来
3. 这样添加了代码后，重新 build 一下就好。范例文件可以用 lazy-load 的方式加载

Webpack 提供了一个方法叫 require.context，可以深度遍历一个目录，返回一个 context module，用这个 API 我们就可以动态的加载这个目录下的文件——具体的讲解和参数说明大家看下文档吧，这个部分中文资料不太多，我不太确定译名。我们可以在范例代码的目录下放一个 index.js，负责加载所有代码范例：

function requireAll(r) {
  r.keys().forEach(r);
}

const Languages = [
  'edgelang',
  'navlang',
];

let context = require.context('./edgelang', true, /\.(edge|css)$/);
requireAll(context);
context = require.context('./navlang', true, /\.(nav|css)$/);
requireAll(context);

export default Languages;

然后我们改一下 webpack.config.js 就可以了。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(nav|edge|fan)$/,
        use: 'raw-loader',
      },
    ],
  },
};