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.
(完)
时间: 2024-10-24 23:11:49