webpack的 entry

標籤：class   ack   logs   exp   string   array   str   webp   item   

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