首页 > 代码库 > webpack的 entry
webpack的 entry
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.
(完)
webpack的 entry
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。