webpack簡明使用教程

02-10

試想一下，你有entry.js和add.js文件，然後需要在entry.js中使用add.js中的功能，有人可能會說，直接把add.js中的代碼複製到entry.js中不就OK了嗎，確實，這樣可以達到效果，但是如果還有anotherEntry.js文件需要add.js中的功能呢，明顯這樣做的結果是導致了大量的代碼重複，違背了前端模塊化的思想，有人又說了，可以用AMD規範（RequireJs）,這個是一個好的解決方法，但是過於複雜，於是webpack運應而生了，webpack，是一種模塊打包工具，它可以把多個模塊打包成一個完整的模塊，因此，webpack也是前端模塊化的一種解決方案，你只需要提供一個入口文件，webpack自動幫你把這個入口文件需要的各種依賴包含進來，並生成一個輸出文件，我們在html頁面中使用的就是這個文件，webpack能處理的模塊類型也更為廣泛，js，css，sass，es6，圖片等等。總之，webpack能把模塊1，模塊2，模塊3...模塊n打包成一個js模塊（也就是一個js文件），其中模塊1可以是一個js文件，模塊2可以是一個css文件，模塊3可以是一副圖片等等，請看下圖：

下面全面介紹一下webpack的使用：

一、準備階段-----安裝

我為本文寫了一個示例庫，webpack-demos，請先安裝這個庫：

git clone mbjgithub (汪汪) · GitHub

如果沒有安裝git，請先安裝git，Git - Downloads

如果沒有全局安裝webpack，為了能使用webpack命令，請先全局安裝webpack，npm install webpack -g，如果這樣安裝不了，或者很長時間也沒有安裝好，請用cnpm install webpack -g，這樣一分鐘內就可以安裝好，如果不知道cnpm是什麼，或者在安裝cnpm的過程中出現了問題，請參考我的這篇文章，安裝webpack緩慢的解決方法

然後進入webpack-demos目錄。

二、webpack的使用

1、demo01---------webpack最簡單使用

首先進入demo01目錄，輸入npm install，這樣npm會自動讀取package.json中內容，給我們安裝項目的依賴包，然後執行命令webpack，這樣你會發現在public下面多了一個bundle.js文件，在瀏覽器中打開index.html可以看到效果，index.html中引用的就是webpack打包生成的bundle.js文件。

下面我們來重新走一遍這個流程，自己親手試試：

（1）demo01項目，切換到demo01目錄，然後執行npm init 命令，執行這個命令會讓你回答一些問題，不過這些問題你現在全部按enter就行了，然後你會發現demo01中多了一個package.json文件，這個文件時npm標準說明文件，npm可以根據這個文件下載項目的依賴包。然後執行cnpm install --save-dev webpack，在該項目中安裝webpack。至於為什麼要加--save-dev參數請看安裝webpack緩慢的解決方法

（2）新建app和public文件夾，app中放置我們寫的模塊，public放置webpack打包生成的模塊，然後新建webpack.config.js文件，運行webpack命令時會自動讀取該文件，然後在app文件夾中新建entry.js和greet.js，在public中新建index.html。

greet.js中的代碼

function greet(){ var divEle=document.createElement("div"); divEle.innerHTML="hello,webpack"; return divEle;}module.exports=greet;

entry.js中的代碼

var greet=require("./greet.js");document.getElementById("container").appendChild(greet());

index.html中的代碼

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="container"></div> <script type="text/javascript" rel="stylesheet" src="./bundle.js"></script> </body></html>

webpack.config.js中的代碼

module.exports={ entry:__dirname+"/app/entry.js", //入口文件 output:{ path:__dirname+"/public", //輸出文件的存放位置 filename:"bundle.js" //輸出文件的名稱 } }

entry指明的是webpack的入口文件，webpack會把這個文件包含的所有模塊打包到一個模塊中，output指明了打包完成後，這個輸出模塊的存放位置和文件名。

（3）執行webpack命令，在public下會發現生成了一個bundle.js文件，你可以運行一下index.html，然後查看一下bundle.js。是不是很激動，webpack實現了前端的模塊化，你已經成功的將複雜的js拆分為簡單的js文件，如果不使用webpack的話，恐怕greet.js中的代碼要寫在entry.js中。

2、demo02--------webpack最重要的功能，loader的使用

Loaders是webpack中最讓人激動人心的功能之一了。通過使用不同的loader，webpack通過調用外部的腳本或工具可以對各種各樣的格式的文件進行處理，比如說分析JSON文件並把它轉換為JavaScript文件，或者說把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器可以識別的JS文件。或者說對React的開發而言，合適的Loaders可以把React的JSX文件轉換為JS文件。

Loaders需要單獨安裝並且需要在webpack.config.js下的modules關鍵字下進行配置，Loaders的配置選項包括以下幾方面：

test：一個匹配loaders所處理的文件的拓展名的正則表達式（必須）

loader：loader的名稱（必須）

include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；

query：為loaders提供額外的設置選項（可選）

進入demo02文件夾，安裝依賴，cnpm install --save-dev webpack，然後看webpack.config.js中的代碼：

module.exports={ entry:__dirname+"/app/entry.js", //入口文件 output:{ path:__dirname+"/public", //輸出文件的存放位置 filename:"bundle.js" //輸出文件的名稱 }, module:{ loaders:[ { test:/.json$/, //正則表達式，告訴loader應該載入以.json結尾的文件 loader:"json" } ] } }

和demo01的webpack.config.js相比多了一個module配置，loaders是數組，表明可以使用多個loader，上面的loader是一個json-loader，可以用來處理以.json結尾的文件，通過這個json-loader，才使得入口文件可以像require js文件一樣，require json文件。不過首先得安裝json-loader，輸入cnpm install -save-dev json-loader即可安裝，

下面重新梳理一下整個流程，自己在走一遍：

（1）新建demo02文件夾，輸入npm init命令，生成package.json文件，輸入

cnpm install --save-dev webpack，安裝webpack依賴，由於我們要用到json-loader，因此輸入cnpm install --save-dev json-loader。

（2）在demo02下，新建app和public文件夾，新建webpack.config.js，在app下，新建config.json,entry.js,greet.js文件，在public下新建index.html文件，

config.json中代碼

{ "content":"hello,webpack"}

greet.js中代碼

var config=require("./config.json");function greet(){ var divEle=document.createElement("div"); // divEle.innerHTML="hello,webpack"; divEle.innerHTML=config.content; return divEle;}module.exports=greet;

entry.js中代碼

var greet=require("./greet.js");document.getElementById("container").appendChild(greet());

index.html中代碼

webpack.config.js中代碼

（3）運行webpack命令，可以看到public文件夾下多了一個bundle.js文件。這說明webpack成功把config.js,greet.js,entry.js打包成了bundle.js ,

3、demo03--------webpack的style-loader和css-loader的使用

style-loder和css-loader得一起使用才能把css文件也打包到bundle.js文件中，和json-loader差不多，只不過style-loader和css-loader處理的是css文件罷了。下面我i就不具體演示了，詳情請看demo03，你可以直接cnpm install，這樣會下載好整個項目的依賴包。然後需要注意一點的是用css-loader和style-loader的時候，有時候會報錯，報錯的最可能的原因就是npm或者cnpm在下載css-loader和style-loader的時候缺胳膊少腿，少下了一下模塊，解決的方法就是先卸載css-loader和style-loader然後在重新下載，或者直接重新下載缺少的模塊。

4、demo04-----------webpack插件的使用

請看demo04的webpack.config.js代碼

var webpack=require("webpack");

module.exports={ entry:__dirname+"/app/entry.js", //入口文件 output:{ path:__dirname+"/public", //輸出文件的存放位置 filename:"bundle.js" //輸出文件的名稱 }, module:{ loaders:[ { test:/.json$/, //正則表達式，告訴loader應該載入以.json結尾的文件 loader:"json" }, { test:/.css$/, loader:"style!css" //對css的處理需要style和css兩個loader來處理,！用於連接兩個loader } ] }, plugins:[ new webpack.BannerPlugin("CopyRight wangwang 2016-10") //這個插件的作用是給output的文件添加版權聲明 ] }

你可以在bundle.js中看到效果。這裡我還做了一點改動，請看package.json中代碼

{ "name": "demo01", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start":"webpack" }, "author": "wangwang", "license": "ISC", "devDependencies": { "css-loader": "^0.25.0", "json-loader": "^0.5.4", "style-loader": "^0.13.1", "webpack": "^1.13.3" }}

注意上面的script屬性，我添加了"start":"webpack"這裡的意思就是讓npm start命令等價於webpack命令，這樣，只需要輸入npm start就相當於執行webpack命令了。

5、demo05--------webpack多入口文件和CommonsChunkPlugin插件

請看webpack.config.js文件代碼

var webpack=require("webpack");var path=require("path");module.exports={ entry:{ pageA:__dirname+"/app/pageA.js", //入口文件pageA pageB:__dirname+"/app/pageB.js" //入口文件pageB }, output:{ path:path.join(__dirname,"public"), //輸出文件目錄 filename:"[name].bundle.js", //[name]引用entry的pageA或者pageB屬性 chunkFilename:"[id].chunk.js" }, plugins:[ new webpack.optimize.CommonsChunkPlugin({ filename:"commons.js", //這個插件用於提取多個入口文件共享的模塊，並輸出到commons.js中,實現模塊復用 name:"commons" }), new webpack.optimize.UglifyJsPlugin() ]}

demo05的效果時在public下會生成pageA.bundle.js,pageB.bundle.js和commons.js文件，commons.js文件中包含入口文件pageA.js和pageB.js都使用的模塊，這是CommonsChunkPlugin插件的功勞。

三、總結

webpack確實一個很好用的模塊化打包工具，小項目其實沒有什麼感覺，但是到了大項目，webpack的優勢就越來越明顯了。由於篇幅限制，webpack的很多功能都沒有一一列出，比如，壓縮，分離css，js等等，想要繼續深入了解的請看webpack官網

四、gulp使用教程（看到別人寫的已經很好了，就不自己寫了）

一點 | gulp詳細入門教程