摘要：字段是用來標記當前頁面依賴的除了共有需要依賴的其他，上面的有字段的三個頁面都是引用了百度編輯器，因為百度編輯器的包都太大了，所以不建議抽取到公用的里，這里的配置在文件里有多帶帶配置。

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

如果模板是后臺管理的生成的怎么辦

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

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

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

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

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

先在js文件的頭部引入這個組件的樣式文件，再來寫js代碼，至少我們在使用組件的時候不必關心css了（下篇文章會講講重構后如何連html也不關注了）

這里為什么會有一個images目錄看起來很多余呢，那是因為我們的php模板里的圖片標簽src前面都帶了一個php的系統(tǒng)變量，webpack插件的靜態(tài)分析是無法識別這里的路徑的，所以保留了這個目錄，在打包后用插件拷貝到打包目錄里

然后是page這個目錄，這個目錄是拿來存放我們頁面的三劍客的，比如有一個叫index的目錄，里面有css、js、html文件，這里的index可以看作是一個頁面目錄，也可以看作是一個分類，如果是分類，那下面就應該是頁面了，html里不應該引用css文件和js文件，因為webpack會幫我們插入生成新的html到我們指定的目錄里

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

proxyTable項我已經在上篇文章中講過了，這里就不贅述了

這個文件就是描述我們entry也就是入口文件和html模板之間的關系映射的文件的

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

這里導出的每個對象的鍵值都對應了page目錄里的名字，下面的file字段對應的入口js文件名稱，默認為main，viewFile對應的是html模板名稱，默認為index，這里很有用，因為在ThinkPHP的View目錄里模板部分文件夾的，所以我們配合templateOutput把html輸出過去就不存在目錄了，templateOutput的默認值為這個對象的鍵值如Index默認為Index。disable字段是開發(fā)模式使用的，當運行npm run dev命令時會自動掃描這個字段，若為false才會啟動，如果全部都為false，那么你頁面越多造成性能開銷就越大，所以除非你同時去開發(fā)幾個頁面，這里建議啟動的頁面不超過5個，其他頁面若要運行，提前npm run build一次讓它跑編譯后的代碼就好了。chunks字段是用來標記當前頁面依賴的除了共有chunks需要依賴的其他chunks，上面的有chunks字段的三個頁面都是引用了百度編輯器，因為百度編輯器的包都太大了，所以不建議抽取到公用的chunk里，這里的配置在webpack.prod.cfg.js文件里有多帶帶配置。

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

exports.getHtmlWebpackPlugins = ( rename ) => {
  let HtmlWebpackPlugins = [];
  Object.keys( mapping ).forEach( function( name ) {
    // 如果不是開發(fā)環(huán)境 就全部打包
    // 如果是開發(fā)環(huán)境 就根據disable來進行打包
    ( 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這個字段是我們能前后端結合開發(fā)的關鍵，沒有使用后端模板的項目真的做到前后分離時是不需要這個字段的，因為PHP會讀這個文件再渲染數據出來給瀏覽器

都是些老生常談的配置，這里就不贅述了。值得注意的是dev.client.js這個文件被我刪了，因為使用了alwaysWriteToDisk實時寫入的功能，改變css文件和js文件都會強制刷新，那熱更新完全就沒法用了，所以html文件的變化還是需要手動刷新的

HtmlWebpackPlugin這個插件確實是有多少頁面就要插入多少個實例進去的，所以直接

...utils.getHtmlWebpackPlugins( false ),

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

manifest

有的頁面因為太簡單并沒有依賴太多共用的js，但是依賴了共用的css，所以這個chunk僅僅是為了抽取css文件用，造成引用了一個空的js，暫時沒有想到好的解決辦法，歡迎再issues提出改進建議

vendor.modules

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

commonChunk

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

vendor

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

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

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

這個腳手架很可能無法直接運行在你的項目里，但是能為你的多頁入口的website提供一個很好的引入webpack的思路

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