摘要：以上代碼功能很簡(jiǎn)單，就是把定義為一個(gè)模塊，在中引用，最終兩文件中要添加的內(nèi)容都顯示在中。我們的任務(wù)完成了，成功生成，合并，引入了，被執(zhí)行了。安裝，處理文件。

前言：

</>復(fù)制代碼 
本套教程是零基礎(chǔ)學(xué)打包工具webpack；
后面會(huì)結(jié)合gulp+webpack搞定所有你得需求；

閑談：

</>復(fù)制代碼 
百度搜了一下，雖然教程多，但是雜亂無章，實(shí)用的沒多少，都是匆匆了事，所以我就自己學(xué)了兩天，現(xiàn)在從最底層教大家完成webpack的常用功能，后期我會(huì)再寫一篇gulp+webpack的前端神器文章，但我也要學(xué)好了再給大家發(fā)^_^!

nodejs安裝：

</>復(fù)制代碼 
1.https://nodejs.org/en/download/  選擇對(duì)應(yīng)自己的下載安裝，命令行工具測(cè)試node -v是否成功；

smart-npm優(yōu)化下載速度：

</>復(fù)制代碼 
2.安裝完node后再測(cè)試一些 npm -v 命令是否成功，由于npm連接外網(wǎng)會(huì)經(jīng)常下載插件會(huì)卡，推薦大家使用smart-npm；
在CMD命令窗口中輸入：npm install --global smart-npm@1 --registry=https://registry.npm.taobao.org/
安裝完成后會(huì)自動(dòng)替換當(dāng)前npm，這時(shí)候你再試試安裝其他的插件是不是很快了^_^？！

webpack全局安裝：

</>復(fù)制代碼 
3.CMD命令窗口中輸入：npm install -g webpack

新建項(xiàng)目：

</>復(fù)制代碼 
4.新建文件夾命名為webpack，如果你建立在D：test/webpack 在cmd命令窗口依次輸入d: 、cd test 、 cd webpack 現(xiàn)在我們已經(jīng)進(jìn)入我們新建的webpack文件夾輸入： 

一直按回車；完成后現(xiàn)在項(xiàng)目里面就有一個(gè)package.json， 我們多加一點(diǎn)東西；建立以下文件：

</>復(fù)制代碼 
/app
  index.js
  pro.js
package.json
webpack.config.js

添加了兩個(gè)js文件，添加了最重要的webpack->webpack.config.js的配置文件(文件名字不能更改)，我們還是從簡(jiǎn)單的hello world開始吧，webpack原生直接支持AMD和CommonJS兩種模塊；

JS代碼

pro.js

//我們這里使用CommonJS風(fēng)格

</>復(fù)制代碼 
function generateText() {
  var element = document.createElement("h2");
  element.innerHTML = "Hello h2 world";
  return element;
}
module.exports = generateText;//module.exports這個(gè)函數(shù)會(huì)把generateText方法暴露給全局在其他js中就可以引用了, exports相當(dāng)于導(dǎo)出，后面index.js中的require就是導(dǎo)入；

index.js

</>復(fù)制代碼 
var pro  = require("./pro");//填寫模塊路徑，導(dǎo)入文件后綴的js可以省略。
var app  = document.createElement("div");
app.innerHTML = "
Hello World
";
app.appendChild(pro());
document.body.appendChild(app);

以上代碼功能很簡(jiǎn)單，就是把pro.js定義為一個(gè)模塊，在index.js中引用，最終兩文件中要添加的內(nèi)容都顯示在index.html中。

配置Webpack

現(xiàn)在開始配置webpack，目標(biāo)是把這兩個(gè)js文件合并成一個(gè)文件. 我們可以自己在build文件夾里面手動(dòng)建一個(gè)index.html文件夾，然后再把合并以后的js引用在里面，但是這樣有些麻煩，所以我們這里安裝一個(gè)plugin，可以自動(dòng)快速的幫我們生成HTML。

</>復(fù)制代碼 
npm install html-webpack-plugin --save-dev

好 有了這個(gè)插件 開始寫webpack.config.js文件

</>復(fù)制代碼 
var path = require("path");//node 引入自帶方法
var HtmlwebpackPlugin = require("html-webpack-plugin");
//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);//__dirname是獲取當(dāng)前文件的絕對(duì)路徑，注意雙下劃線
var APP_PATH = path.resolve(ROOT_PATH, "app");
var BUILD_PATH = path.resolve(ROOT_PATH, "build");
module.exports = {
  //項(xiàng)目的文件夾 可以直接用文件夾名稱 默認(rèn)會(huì)找index.js 也可以確定是哪個(gè)文件名字
  entry: APP_PATH,
  //輸出的文件名 合并以后的js會(huì)命名為bundle.js
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  //添加我們的插件 會(huì)自動(dòng)生成一個(gè)html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: "Hello World app"
    })
  ]
};

然后在項(xiàng)目根目錄運(yùn)行

</>復(fù)制代碼 
D:
estwebpack>webpack

終端顯示一堆信息，然后告訴你成功了。

你可以使用webpack --help看看一些運(yùn)行的時(shí)候可選的參數(shù)

你會(huì)發(fā)現(xiàn)多出來一個(gè)build文件夾，直接點(diǎn)開里面的html文件，你會(huì)發(fā)現(xiàn)我們可愛的“hello world”已經(jīng)插入到頁面了。我們的任務(wù)完成了，成功生成html，合并js，html引入了js，js被執(zhí)行了。

配置webpack-dev-server

上面任務(wù)雖然完成了，但是我們要不斷運(yùn)行程序然后查看頁面，所以最好新建一個(gè)開發(fā)服務(wù)器，可以serve我們pack以后的代碼，并且當(dāng)代碼更新的時(shí)候自動(dòng)刷新瀏覽器。

安裝webpack-dev-server

</>復(fù)制代碼 
npm install webpack-dev-server --save-dev

安裝完畢后 在webpack.config.js中添加配置

</>復(fù)制代碼 
module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  }
  ...
}

然后再package.json里面配置一下運(yùn)行的命令,npm支持自定義一些命令

</>復(fù)制代碼 
...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

好了，在項(xiàng)目根目錄下輸入npm start,一堆信息后server已經(jīng)起來了，在瀏覽器里面輸入http://localhost:8080 發(fā)現(xiàn)偉大的hello world出現(xiàn)了，在js里面隨便修改一些輸出然后保存, 瀏覽器自動(dòng)刷新，新的結(jié)果出現(xiàn)了。

添加CSS樣式

現(xiàn)在來添加一些樣式，webpack使用loader的方式來處理各種各樣的資源，比如說樣式文件，我們需要兩種loader，css-loader 和 style－loader，css-loader會(huì)遍歷css文件，找到所有的url(...)并且處理。style-loader會(huì)把所有的樣式插入到你頁面的一個(gè)style標(biāo)簽中。

安裝我們的loader

</>復(fù)制代碼 
npm install css-loader style-loader --save-dev

配置loader，在webpack.config.js中

</>復(fù)制代碼 
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  ...
  module: {
    loaders: [
      {
        test: /.css$/,
        loaders: ["style", "css"],
        include: APP_PATH
      }
    ]
  },
  ...
  plugins: [
    new HtmlwebpackPlugin({
      title: "Hello World app"
    })
  ]

看loaders的書寫方式，test里面包含一個(gè)正則，包含需要匹配的文件，loaders是一個(gè)數(shù)組，包含要處理這些程序的loaders，這里我們用了css和style，注意loaders的處理順序是從右到左的，這里就是先運(yùn)行css-loader然后是style-loader.

新建一個(gè)樣式文件 main.css

</>復(fù)制代碼 
h1 {
    color: red;
}

記得在入口文件index.js中引用

</>復(fù)制代碼 
require("./main.css");

然后發(fā)現(xiàn)標(biāo)題變成紅色的了，webpack的理念是基于項(xiàng)目處理的，把對(duì)應(yīng)的文件格式給對(duì)應(yīng)的loader處理，然后你就不用管了，它會(huì)決定怎么壓縮，編譯。

那現(xiàn)在想使用一些有愛的css預(yù)編譯程序，來點(diǎn)sass吧。 你可能已經(jīng)想到了，再來個(gè)loader就行啦，確實(shí)是這樣簡(jiǎn)單。

</>復(fù)制代碼 
npm install sass-loader --save-dev

稍微修改一下webpack.config.js，刪掉我們先前添加的css規(guī)則，加上下面的loader

</>復(fù)制代碼 
  {
    test: /.scss$/,
    loaders: ["style", "css", "sass"],
    include: APP_PATH
  },

添加兩個(gè)sass文件，variables.scss和main.scss

variables.scss

</>復(fù)制代碼 
$red: red;

main.scss

</>復(fù)制代碼 
@import "./variables.scss";
h1 {
  color: $red;
}

在index.js中引用

</>復(fù)制代碼 
require("./main.scss");

然后發(fā)現(xiàn)標(biāo)題如愿變紅，相當(dāng)簡(jiǎn)單吧。

處理圖片和其他靜態(tài)文件

這個(gè)和其他一樣，也許你也已經(jīng)會(huì)玩了。安裝loader，處理文件。諸如圖片，字體等等，不過有個(gè)神奇的地方它可以根據(jù)你的需求將一些圖片自動(dòng)轉(zhuǎn)成base64編碼的，為你減輕很多的網(wǎng)絡(luò)請(qǐng)求。

安裝url-loader

</>復(fù)制代碼 
npm install url-loader --save-dev

配置config文件

</>復(fù)制代碼 
  {
    test: /.(png|jpg)$/,
    loader: "url?limit=40000"
  }

注意后面那個(gè)limit的參數(shù)，當(dāng)你圖片大小小于這個(gè)限制的時(shí)候，會(huì)自動(dòng)啟用base64編碼圖片。

下面舉個(gè)栗子。

新建一個(gè)imgs文件夾，往里面添加一張崔叔的照片。在scss文件中添加如下的東西。

</>復(fù)制代碼 
@import "./variables.scss";
h1 {
  color: $red;
  background: url("./imgs/avatar.jpg");
}

npm start, 然后查看圖片的url，用瀏覽器審查元素看到生成了best64位碼的圖片編碼，建議一些圖標(biāo)什么的用此功能。
添加第三方庫

有的時(shí)候還想來點(diǎn)jquery，moment，undersocre之類的庫，webpack可以非常容易的做到這一點(diǎn)，有謠言說Bower即將停止開發(fā)了, 作者推薦都使用npm來管理依賴。那么我們現(xiàn)在安裝在我們的app中添加jquery和moment的支持。

</>復(fù)制代碼 
npm install jquery --save-dev

在js中引用

</>復(fù)制代碼 
var pro = require("./pro");
var $ = require("jquery");
var app  = document.createElement("div");
app.innerHTML = "
Hello World it
";
document.body.appendChild(app);
app.appendChild(pro());
$("body").append("
look at me! now is " + new Date() + "
");

看看瀏覽器，成功！ jquery現(xiàn)在都起作用了！

開發(fā)技巧

啟用source-map

現(xiàn)在的代碼是合并以后的代碼，不利于排錯(cuò)和定位，只需要在webpack.config.js中添加

</>復(fù)制代碼 
  ...
  devtool: "eval-source-map",
  ...

這樣出錯(cuò)以后就會(huì)采用source-map的形式直接顯示你出錯(cuò)代碼的位置。

配置webpack-dev-server代理

一個(gè)典型的例子就是前后端分離。后端是的server不管用什么寫的。假定在本機(jī)他是類似http://localhost:5000/api/*這類的請(qǐng)求，現(xiàn)在添加配置讓ajax請(qǐng)求可以直接proxy過去。

</>復(fù)制代碼 
devServer: {
    hot: true,
    inline: true,
    //其實(shí)很簡(jiǎn)單的，只要配置這個(gè)參數(shù)就可以了
    proxy: {
      "/api/*": {
          target: "http://localhost:5000",
          secure: false
      }
    }
}

重啟以后 發(fā)現(xiàn)/api/*的請(qǐng)求都代理到http://localhost:5000去了～
安裝jshint檢測(cè)js語法

</>復(fù)制代碼 
npm install jshint-loader --save-dev

在config文件中配置

</>復(fù)制代碼 
module: {
...
    //和loaders一樣的語法，很簡(jiǎn)單
    perLoaders: [
        {
            test: /.jsx?$/,
            include: APP_PATH,
            loader: "jshint-loader"
        }
    ]
}
...
//配置jshint的選項(xiàng)，支持es6的校驗(yàn)
jshint: {
  "esnext": true
},

好了 現(xiàn)在每次npm run start的時(shí)候就可以看到j(luò)shint的提示信息咯
有時(shí)某些插件都需要全文件使用例如：jquery
webpack提供一個(gè)插件 把一個(gè)全局變量插入到所有的代碼中，在webpack.config.js里面配置

</>復(fù)制代碼 
  ...
  plugins: [
    new HtmlwebpackPlugin({
      title: "Hello World app"
    }),
    //provide $, jQuery and window.jQuery to every script
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
  ...

分離app.js和第三方庫

現(xiàn)在我們build出來的只有一個(gè)bundle.js 如果第三方庫很多的話，會(huì)造成這個(gè)文件非常大，減慢加載速度，現(xiàn)在我們要把第三方庫和我們app本身的代碼分成兩個(gè)文件。

修改entry入口文件

</>復(fù)制代碼 
  entry: {
    app: path.resolve(APP_PATH, "index.js"),
    //添加要打包在vendors里面的庫
    vendors: ["jquery", "moment"]
  },

添加CommonsChunkPlugin

</>復(fù)制代碼 
  plugins: [
    //這個(gè)使用uglifyJs壓縮你的js代碼
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    //把入口文件里面的數(shù)組打包成verdors.js
    new webpack.optimize.CommonsChunkPlugin("vendors", "vendors.js"),
    new HtmlwebpackPlugin({
      title: "Hello World app"
    })
  ]

添加完畢 運(yùn)行npm run build
在build文件夾中發(fā)現(xiàn)如下結(jié)構(gòu)

budle.js
index.html
vendors.js