個人維護的 webpack@latest 多頁腳手架2.X已經發布，喜歡請給星，詳見： https://github.com/pomelott/webpack-multi-page-cli
首先介紹傳統模塊化開發的主流方案：
1.基與CMD的sea.js，玉伯提出的解決方案，據說原來京東團隊在使用。用時才定義，就近加載。
2.基於AMD的require.js，之前在用。提前聲明與定義。國外團隊維護。
3.基於commonJS的webpack，當下最流行的，也是大勢所趨。基於node環境，功能強大，可擴展性極強。得益於NPM的良好生態、開源社區，擴展項不斷增加。國外的同行維護得很給力。
連續研究了幾天webpack，掉進很多坑也收獲很多，學好之后用起來簡直不能再爽，比之前用的require爽的不止一點點。
若未遇到本文提到的“坑”，可直接跳過，不作考慮！
下面正式開始webpack的征程！
1.webpack環境構建
***使用webpack首先要安裝node.js環境：
官方下載直接安裝即可。
坑一:WIN8下可視化安裝node有時會報2502、2503的錯誤，在此需要提升至管理員權限，並以管理員權限運行cmd，使用msiexec /package 文件名 進行安裝。
***環境安裝完之后可以使用：node -v 和npm -v 測試node環境是否安裝成功。若安裝成功則繼續下載webpack：npm install webpack -g 在此全局安裝即可，若需在項目目錄下安裝，則使用命令：npm install webpack --save-dev.
坑二:安裝webpack對node版本要求，卸載之前的node（可在命令行使用where node查看node的本地目錄以保證node被完全卸載），安裝最新版本即可。
2.項目構建、創建文件
***webpack安裝成功后，開始構建項目，首先創建目錄：
項目目錄結構非常重要（后面還有坑在等着你），src為開發目錄，build為打包目錄，以后還有詳解。
命令行中進入項目目錄:npm init 創建pack.json。
在src目錄下創建開發環境目錄，如下圖所示：
images-------------------圖片模塊文件夾（后面會說明圖片模塊的打包）
index.js-------------------打包的入口文件
common.js-----------------為普通的js模塊文件
style.css------------------樣式模塊文件
index.html文件代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript" src="./bundle.js"></script>></script>
</body>
</html>
***bundle.js為打包后的文件，里面包括所有模塊（js/css/圖片/字體等）的配置及打包文件。
3.完成js的打包
common.js文件代碼如下：
module.exports.doCommon=function(){ console.log("common is ok !") }
index.js文件代碼如下：
var commonFn=require("./common.js"); commonFn.doCommon(); console.log("index is ok !");
在命令行中進入src目錄：webpack index.js bundle.js
在瀏覽器中查看index.html,打開控制台，效果如下則完成對js的打包：
common is ok ! index is ok !
4.打包css模塊
在此需要安裝style-loader與css-loader
npm install style-loader css-loader --save-dev
在此打包css有兩種方式：
方法（1）在入口文件index.js中直接require樣式文件，此方法需要指定加載器：
創建一個style.css文件，隨意加些樣式，然后在入口文件中引入style.css。index.js文件：
坑三：在此require("style!css!./style.css")也可以，但有時會報錯，補全最好;
require("style-loader!css-loader!./style.css");
命令行中運行：
webpack index.js bundle.js
打開index.html，樣式已經應用上.
方法（2）在根目錄添加webpack.config.js配置文件后直接引入css文件
webpack.config.js文件代碼如下：
var path=require("path") module.exports={ entry:{ //入口文件路徑，要求為相對路徑
index:["./src/index.js"] }, output:{ filename:"bundle.js", //paht要求為絕對路徑，需要引入paht模塊調用resolve方法
path:path.resolve(__dirname,"src/") }, module:{ loaders:[ { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] } }
index.js文件代碼如下
require("./style.css"); var common=require("./common.js"); common.commonFn(); console.log("index is ok")
修改style.css樣式后，重新使用webpack命令，打開index.html，新的樣式已經應用上.
5.打包html
接下來使用html-webpack-plugin將開發文件打包至build文件夾下：
首先下載插件：
npm install html-webpack-plugin --save-dev
完了之后重新配置文件：
var path=require("path"); //插件需要引入 var htmlWebpackPlugin=require("html-webpack-plugin"); module.exports={ entry:{ //入口文件路徑，要求為相對路徑 index:["./src/index.js"] }, output:{ filename:"bundle.js", //paht要求為絕對路徑，需要引入paht模塊調用resolve方法 //現在要把輸出路徑改為構建路徑 path:path.resolve(__dirname,"./build/") }, module:{ loaders:[ { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] }, plugins:[new htmlWebpackPlugin({ title:"firstwebpack", template:"./src/index.html", filename:"index.html" })] }
在命令行中輸入webpack直接打包至build文件夾下，打開index.html后查看效果，樣式已經應用上：
坑四：在此輸入webpack命令后可能會報錯：“Cannot find module 'webpack/lib/node/NodeTemplatePlugin”，原因是node的安裝目錄沖突導致系統node的NODE_PATH環境變量配置錯誤。
解決方案：在命令行中輸入：
npm config get piefix
此命令會顯示當前系統應用的node路徑，按照此路徑配置環境變量即可。
6.打包圖片文件
坑五：在css中引入圖片的大小大於8k時，若沒有安裝file-loader會報錯，原因是大於8k的圖片會被webpack當做文件處理，而小於8k的圖片會被轉為base64編碼引入行間以減少http請求；若未下載html-withimg-loader則在html中引入的img標簽不會被打包。
需要下載三個加載器：
npm install url-loader file-loader html-withimg-loader --save-dev
配置文件中增加loader的配置選項：
//用於css中背景圖片的加載器 { test: /\.(png|jpg)$/, //limit:圖片大小小於8K，會以base64編碼圖片以減少http請求 //name：輸出子目錄構建 loader: 'url-loader?limit=8192&name=./images/[name].[ext]' },
//用於html中img標簽的圖片加載器 { test: /\.html$/, loader: 'html-withimg-loader' }
最后在html中增加img標簽，在css中利用background引入標簽，重新運行webpack后即可看到圖片被加載出來了。
7.打包jquery
使用jquery需要下載jquery包和expose-loader裝載器
npm install jquery expose-loader --save-dev
然后進行裝載器配置：
***需配置在所有loader之前，配置文件如下：
var path=require("path"); //插件需要引入 var htmlWebpackPlugin=require("html-webpack-plugin"); module.exports={ entry:{ //入口文件路徑，要求為相對路徑 index:["./src/index.js"] }, output:{ filename:"bundle.js", //paht要求為絕對路徑，需要引入paht模塊調用resolve方法 //現在要把輸出路徑改為構建路徑 path:path.resolve(__dirname,"./build/") }, module:{ loaders:[ //配置在所有裝載器最前面 { test: require.resolve("jquery"), loader: "expose-loader?$" }, { test: /\.css$/, loaders: ['style-loader', 'css-loader'] }, { test: /\.(png|jpg)$/, //limit:圖片大小小於8K，會以base64編碼圖片以減少http請求 //name：輸出子目錄構建 loader: 'url-loader?limit=8192&name=./images/[name].[ext]' }, { test: /\.html$/, loader: 'html-withimg-loader' } ] }, plugins:[new htmlWebpackPlugin({ title:"firstwebpack", template:"./src/index.html", filename:"index.html" })] }
在index.js中引入jquery
//index.js require("./style.css"); //引入jquery並指定裝載器為expose-loader require("expose-loader?$!jquery"); var commonFn=require("./common.js"); commonFn.doCommon(); console.log("index is ok !") $("#div1").css({"border":"10px solid #f00"})
重新webpack后打開index.html，未報錯，樣式已經應用上。
至此，基礎的webpack打包已經完成，后續的進階打包會持續更新.....
完全原創，喜歡請點擊右下角推薦，未經允許禁止轉載。