webpack的 entry

Posted 2020-09-04

webpack 在打包的时候有几种选择:

  entry: "./app/entry", // string | object | array
  entry: ["./app/entry1", "./app/entry2"],
  entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },

对于非单页应用的项目, 经常会选择第三种写法, 设置多个入口, 这没什么问题, 不过有时页面多的话, 维护这个entry 对象挺麻烦的.

那就换一种思路吧, 通常项目的页面目录都是有规则的, 比如/src/pagea/index.js,  /src/pageb/index.js, 如果可以保持这样的命名阅读的话

我们可以让entry 自己找到所有的 [pagename]/index.js 入口, 实现打包.

 

var glob = require("glob");

var entries = glob.sync("./src/page/*/index.ts").reduce(function (prev, item) {
    key = item.replace(/\//g, ‘_‘).replace(/^\./, ‘‘).replace(/^\_/, ‘‘).replace(/\.js$/, ‘‘);
    prev[key] = item;
    return prev;
}, {});

module.exports = {
    entry: entries,
    output: {
        path: path.resolve(__dirname, "bin"),
        filename: "[name].js"
    },
    // ...
}

　　

这里的正则替换的作用是把形如  src/page/projecta/index.js 变成  src_page_projecta_index (name变量的值) 的形式, 然后输出到 bin/src_page_projecta_index.js.

 

(完)