webpack 打包時到底如何組織js

問題一：引入前端庫，方法也是不同的

好比 lodash.js ，做爲一個 chunk 用 html-webpack-plugin 打包到頁面裏，會生成一個全局變量 window._ ，在其它 js 中沒必要 require('lodash'); 就能夠直接使用 window._

好比 webpack-zepto，做爲一個 chunk 用 html-webpack-plugin 打包到頁面裏，不會生成 window.$ ，若是在其它 js 中直接使用 window.$ ，就會報錯。須要在其它 js 中 var $ = require('webpack-zepto'); 這樣 zepto 和頁面 js 會打包到一個文件裏，體積太大，並且不利於瀏覽器緩存

爲了有效利用瀏覽器緩存，避免單個 js 體積太大，咱們但願每一個前端庫打包成一個 js ，和頁面邏輯分開

問題二：CommonsChunkPlugin

針對上一個問題，你們會提出使用 CommonsChunkPlugin ，參考這裏

然而，使用 CommonsChunkPlugin 後，被指定的公共文件成了 js 的入口，其它 js 包括其它前端庫都依賴這個 js ，如：

entry : {
    'lodash'            : ['lodash'],
    'zepto'             : ['webpack-zepto'],
},

plugins : [
	new CommonsChunkPlugin({
		names : ['zepto', 'lodash']
	}),
	...
]

打包後的 zepto.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// install a JSONP callback for chunk loading
/******/ 	var parentJsonpFunction = window["webpackJsonp"];
/******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {

打包後的 lodash.js

webpackJsonp([2],{

/***/ 0:
/***/ function(module, exports, __webpack_require__) {

那麼必須指定 zepto.js 放在 lodash.js 的前面，否則就會報 webpackJsonp 未定義的錯誤！

然而本來 zepto 和 lodash 是沒有相互依賴的關係的，能忍？

還有更不能妥協的場景，我要引入一個 jsA，它本來沒有任何依賴，但它必須放在 head 裏，由於它加載時會執行 document.write

打包時，我能夠指定 jsA 放在 head 裏，然而如今它依賴於 zepto 了，就必須把 zepto + jsA 放在 head 裏

目前的解決方案：

不使用 CommonsChunkPlugin，每個前端庫，新建一個 js 專門 require 它，並生成一個全局變量，如：

lib/_zepto.js

window.$ = require("webpack-zepto");

而後做爲一個 chunk 打包到頁面中

這樣解決了以上兩個問題：

1. 每一個前端庫打包成一個獨立 js，能夠有效利用瀏覽器緩存，生成全局變量，頁面 js 中能夠直接使用

2. 不相互依賴的前端庫位置隨意，只要確保它們都在頁面邏輯 js 前引入就能夠了

 

拋磚引玉，請高手批評指正！謝謝！