摘要：字段是用來標(biāo)記當(dāng)前頁面依賴的除了共有需要依賴的其他，上面的有字段的三個(gè)頁面都是引用了百度編輯器，因?yàn)榘俣染庉嬈鞯陌继罅耍圆唤ㄗh抽取到公用的里，這里的配置在文件里有多帶帶配置。

webpack的流行給前端開發(fā)減少了許多不必要的工作，webpack可以讓我們更純粹的關(guān)注我們的代碼，但是很多人認(rèn)為它更適合單頁應(yīng)用，主要有以下一些痛點(diǎn)

如果模板是后臺(tái)管理的生成的怎么辦

我目前沒有使用任何模塊化的開發(fā)方式，或使用了模塊加載器（如seajs、requireJs等）

其實(shí)第二點(diǎn)我已經(jīng)在上篇文章中講過了，如果平滑的過渡到webpack，痛點(diǎn)一也解釋過，只是沒有詳細(xì)的說明，此次分享一個(gè)完整的配置，來應(yīng)對(duì)你的多頁項(xiàng)目。不管是jsp、php、html、xshtml都可以通過具體的配置來使用webpack，為什么如此青睞webpack，在我看來熱更新技術(shù)、less、sass、es6、es7的引入是最吸引我的（嘗試過使用gulp、但是感覺并沒有webpack這種一站式服務(wù)來得順手），下面我詳細(xì)講述下下面一些配置的用途，部分代碼來自vue-cli。

├─build                 // webpack的配置文件存放目錄
├─Public                // 我們的前端資源存放目錄
│  ├─dev                // 源碼存放目錄（可以改名為src）
│  │  ├─css             // 一些共用的css文件，共用才放這里哦
│  │  ├─font            // 字體文件
│  │  ├─images          // 圖片文件
│  │  └─js              // js文件
│  │      ├─libs        // npm里沒有的第三方插件或庫
│  │      ├─modules     // 項(xiàng)目的業(yè)務(wù)組件存放目錄
│  │      └─page        // 頁面的目錄
│  │          └─Index   // 具體的頁面名稱
│  └─dist               // 編譯后的存放目錄
└─static                // 好像是拿來緩存文件用的？vue-cli存在的

當(dāng)然，我目前開發(fā)的項(xiàng)目是半路引入webpack的，大部分都還是jQuery那套東西、但是我還是秉著關(guān)注點(diǎn)分離的原則，將html、css、js按頁面來放了，不再使用老掉牙的按文件類型來放、那是因?yàn)橛辛?b>webpack的打包才可以這么隨意。除了分離出來的模板（ThinkPHP用標(biāo)簽來引入模板）文件，js和css都是放到同模板名的Public/dev/js/modules目錄里了，這樣一來可以直接像這樣

require( "./style.less" );
...

先在js文件的頭部引入這個(gè)組件的樣式文件，再來寫js代碼，至少我們?cè)谑褂媒M件的時(shí)候不必關(guān)心css了（下篇文章會(huì)講講重構(gòu)后如何連html也不關(guān)注了）

這里為什么會(huì)有一個(gè)images目錄看起來很多余呢，那是因?yàn)槲覀兊膒hp模板里的圖片標(biāo)簽src前面都帶了一個(gè)php的系統(tǒng)變量，webpack插件的靜態(tài)分析是無法識(shí)別這里的路徑的，所以保留了這個(gè)目錄，在打包后用插件拷貝到打包目錄里

然后是page這個(gè)目錄，這個(gè)目錄是拿來存放我們頁面的三劍客的，比如有一個(gè)叫index的目錄，里面有css、js、html文件，這里的index可以看作是一個(gè)頁面目錄，也可以看作是一個(gè)分類，如果是分類，那下面就應(yīng)該是頁面了，html里不應(yīng)該引用css文件和js文件，因?yàn)閣ebpack會(huì)幫我們插入生成新的html到我們指定的目錄里

最重要的就是build目錄下的了

proxyTable項(xiàng)我已經(jīng)在上篇文章中講過了，這里就不贅述了

這個(gè)文件就是描述我們entry也就是入口文件和html模板之間的關(guān)系映射的文件的

module.exports = {
  // 微知首頁
  "Index": {
    // 對(duì)應(yīng)到Public/dev/js/page的文件夾名稱
    file: "main",
    // 視圖層的文件名稱，默認(rèn)為index
    viewFile: "index",
    disable: false,
    templateOutput: "Index"
  },
  "EditText": {
    chunks: [ "editor" ],
    disable: false
  },
  // 編輯模板
  "Template": {
    chunks: [ "editor" ],
    disable: true
  },
  // 默認(rèn)模板
  "GzhArtStyle": {
    chunks: [ "editor" ],
    disable: true
  }
};

這里導(dǎo)出的每個(gè)對(duì)象的鍵值都對(duì)應(yīng)了page目錄里的名字，下面的file字段對(duì)應(yīng)的入口js文件名稱，默認(rèn)為main，viewFile對(duì)應(yīng)的是html模板名稱，默認(rèn)為index，這里很有用，因?yàn)樵?b>ThinkPHP的View目錄里模板部分文件夾的，所以我們配合templateOutput把html輸出過去就不存在目錄了，templateOutput的默認(rèn)值為這個(gè)對(duì)象的鍵值如Index默認(rèn)為Index。disable字段是開發(fā)模式使用的，當(dāng)運(yùn)行npm run dev命令時(shí)會(huì)自動(dòng)掃描這個(gè)字段，若為false才會(huì)啟動(dòng)，如果全部都為false，那么你頁面越多造成性能開銷就越大，所以除非你同時(shí)去開發(fā)幾個(gè)頁面，這里建議啟動(dòng)的頁面不超過5個(gè)，其他頁面若要運(yùn)行，提前npm run build一次讓它跑編譯后的代碼就好了。chunks字段是用來標(biāo)記當(dāng)前頁面依賴的除了共有chunks需要依賴的其他chunks，上面的有chunks字段的三個(gè)頁面都是引用了百度編輯器，因?yàn)榘俣染庉嬈鞯陌继罅耍圆唤ㄗh抽取到公用的chunk里，這里的配置在webpack.prod.cfg.js文件里有多帶帶配置。

這個(gè)文件主要是getHtmlWebpackPlugins方法，配合注釋您就能看懂剛才的mapping配置都怎么用的了

exports.getHtmlWebpackPlugins = ( rename ) => {
  let HtmlWebpackPlugins = [];
  Object.keys( mapping ).forEach( function( name ) {
    // 如果不是開發(fā)環(huán)境 就全部打包
    // 如果是開發(fā)環(huán)境 就根據(jù)disable來進(jìn)行打包
    ( process.env.NODE_ENV !== "development" ||
      !mapping[ name ].disable ) &&
    HtmlWebpackPlugins.push(
      new HtmlWebpackPlugin( {
        alwaysWriteToDisk: true,
        // php端使用到的模板
        // 如果是其他目錄在此修改路徑
        filename: `${ROOT}/Application/Home/View/${mapping[ name ].templateOutput ? mapping[ name ].templateOutput : name}/${mapping[name].viewFile || "index"}.html`,
        // 插件用的模板文件
        template: `${ROOT}/${config.$d}/js/page/${name}/${mapping[name].viewFile || "index"}.${mapping[name].templateType || "html"}`,
        chunks: ( function() {
          if ( !rename ) {
            //let chunks = [ "vendor.npm", "vendor.TP", "manifest", "vendor.modules" ];
            let chunks = [ "vendor.modules", "vendor", "manifest" ];
            if ( mapping[ name ].chunks ) {
              chunks = chunks.concat( mapping[ name ].chunks );
            }
            return chunks;
          }
          return [];
        }() ).concat( [ `${rename ? config.dev.entryPrefix : ""}${name}` ] ),
        // 手工排序
        chunksSortMode: "manual",
        inject: true,
        showErrors: false
      } ) );
  } );
  return HtmlWebpackPlugins;
}

alwaysWriteToDisk這個(gè)字段是我們能前后端結(jié)合開發(fā)的關(guān)鍵，沒有使用后端模板的項(xiàng)目真的做到前后分離時(shí)是不需要這個(gè)字段的，因?yàn)镻HP會(huì)讀這個(gè)文件再渲染數(shù)據(jù)出來給瀏覽器

都是些老生常談的配置，這里就不贅述了。值得注意的是dev.client.js這個(gè)文件被我刪了，因?yàn)槭褂昧?b>alwaysWriteToDisk實(shí)時(shí)寫入的功能，改變css文件和js文件都會(huì)強(qiáng)制刷新，那熱更新完全就沒法用了，所以html文件的變化還是需要手動(dòng)刷新的

HtmlWebpackPlugin這個(gè)插件確實(shí)是有多少頁面就要插入多少個(gè)實(shí)例進(jìn)去的，所以直接

...utils.getHtmlWebpackPlugins( false ),

展開這個(gè)數(shù)組就好了，這里傳入的布爾參數(shù)是為了區(qū)分開發(fā)模式和build模式，傳入true只會(huì)有一個(gè)chunk被包含進(jìn)來，就是當(dāng)前頁面依賴的所有js和css等
然后是chunks

manifest

有的頁面因?yàn)樘?jiǎn)單并沒有依賴太多共用的js，但是依賴了共用的css，所以這個(gè)chunk僅僅是為了抽取css文件用，造成引用了一個(gè)空的js，暫時(shí)沒有想到好的解決辦法，歡迎再issues提出改進(jìn)建議

vendor.modules

這個(gè)chunk是為了抽取我們自己寫的業(yè)務(wù)組件、在修改業(yè)務(wù)組件后能夠很好的利用緩存只更新這一個(gè)文件

commonChunk

上文mapping里的chunks字段就是這里配置的，如果還有其他局部共用的大chunk可以在這里再配置一個(gè)

vendor

vendor就是拿來放置第三方插件的，這里抽取了npm和lib里面的，當(dāng)項(xiàng)目穩(wěn)定后處于一個(gè)穩(wěn)定的維護(hù)期，沒有較大改動(dòng)時(shí)，這個(gè)文件就可以長(zhǎng)期緩存在用戶的電腦里了。

new CopyWebpackPlugin( [ {
  from: path.resolve( __dirname, `../${config.$d}/images` ),
  to: `${config.build.assetsSubDirectory}/images`,
  ignore: [ ".*" ]
} ] ),

上面的代碼就是拷貝images這個(gè)目錄到我們打包生成的目錄里，防止資源丟失的問題

這個(gè)腳手架很可能無法直接運(yùn)行在你的項(xiàng)目里，但是能為你的多頁入口的website提供一個(gè)很好的引入webpack的思路

嗯，留下倉庫傳送門
和博客地址
have fun ~~