标签： require

使用 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',
      },
    ],
  },
};
```
2019年9月13日
Electron 支持 .require()
突然发现 Electron 支持浏览器里的 .requrie()，这样其实就不用 webpack 打包了，反正最后体积也不差那一丢丢。还好测试。

[2016-12-08]

我的环境里，Webpack + Vue + Vue-router，在 webpack.config.js 里设置：
```
module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
}
```
打包出来的文件会报 “Unknown custom element: – did you register the component correctly” 错误，只好不用 webpack 了……
2016年12月7日

标签： require

使用 Webpack 动态打包文件夹

Electron 支持 .require()

[2016-12-08]