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

前言：

本套教程是零基礎學打包工具webpack；
后面會結合gulp+webpack搞定所有你得需求；

閑談：

百度搜了一下，雖然教程多，但是雜亂無章，實用的沒多少，都是匆匆了事，所以我就自己學了兩天，現在從最底層教大家完成webpack的常用功能，后期我會再寫一篇gulp+webpack的前端神器文章，但我也要學好了再給大家發^_^!

nodejs安裝：

1.https://nodejs.org/en/download/  選擇對應自己的下載安裝，命令行工具測試node -v是否成功；

smart-npm優化下載速度：

2.安裝完node后再測試一些 npm -v 命令是否成功，由于npm連接外網會經常下載插件會卡，推薦大家使用smart-npm；
在CMD命令窗口中輸入：npm install --global smart-npm@1 --registry=https://registry.npm.taobao.org/
安裝完成后會自動替換當前npm，這時候你再試試安裝其他的插件是不是很快了^_^？！

webpack全局安裝：

3.CMD命令窗口中輸入：npm install -g webpack

新建項目：

4.新建文件夾命名為webpack，如果你建立在D：test/webpack 在cmd命令窗口依次輸入d: 、cd test 、 cd webpack 現在我們已經進入我們新建的webpack文件夾輸入： 

一直按回車；完成后現在項目里面就有一個package.json， 我們多加一點東西；建立以下文件：

/app
  index.js
  pro.js
package.json
webpack.config.js

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

JS代碼

pro.js

//我們這里使用CommonJS風格

function generateText() {
  var element = document.createElement("h2");
  element.innerHTML = "Hello h2 world";
  return element;
}

module.exports = generateText;//module.exports這個函數會把generateText方法暴露給全局在其他js中就可以引用了, exports相當于導出，后面index.js中的require就是導入；

index.js

var pro  = require("./pro");//填寫模塊路徑，導入文件后綴的js可以省略。
var app  = document.createElement("div");
app.innerHTML = "
Hello World
";
app.appendChild(pro());
document.body.appendChild(app);

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

配置Webpack

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

npm install html-webpack-plugin --save-dev

好 有了這個插件 開始寫webpack.config.js文件

var path = require("path");//node 引入自帶方法
var HtmlwebpackPlugin = require("html-webpack-plugin");
//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);//__dirname是獲取當前文件的絕對路徑，注意雙下劃線
var APP_PATH = path.resolve(ROOT_PATH, "app");
var BUILD_PATH = path.resolve(ROOT_PATH, "build");

module.exports = {
  //項目的文件夾 可以直接用文件夾名稱 默認會找index.js 也可以確定是哪個文件名字
  entry: APP_PATH,
  //輸出的文件名 合并以后的js會命名為bundle.js
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  //添加我們的插件 會自動生成一個html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: "Hello World app"
    })
  ]
};

然后在項目根目錄運行

D:	estwebpack>webpack

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

你可以使用webpack --help看看一些運行的時候可選的參數

你會發現多出來一個build文件夾，直接點開里面的html文件，你會發現我們可愛的“hello world”已經插入到頁面了。我們的任務完成了，成功生成html，合并js，html引入了js，js被執行了。

配置webpack-dev-server

上面任務雖然完成了，但是我們要不斷運行程序然后查看頁面，所以最好新建一個開發服務器，可以serve我們pack以后的代碼，并且當代碼更新的時候自動刷新瀏覽器。

安裝webpack-dev-server

npm install webpack-dev-server --save-dev

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

module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  }
  ...
}

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

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

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

添加CSS樣式

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

安裝我們的loader

npm install css-loader style-loader --save-dev

配置loader，在webpack.config.js中

  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里面包含一個正則，包含需要匹配的文件，loaders是一個數組，包含要處理這些程序的loaders，這里我們用了css和style，注意loaders的處理順序是從右到左的，這里就是先運行css-loader然后是style-loader.

新建一個樣式文件 main.css

h1 {
    color: red;
}

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

require("./main.css");

然后發現標題變成紅色的了，webpack的理念是基于項目處理的，把對應的文件格式給對應的loader處理，然后你就不用管了，它會決定怎么壓縮，編譯。

那現在想使用一些有愛的css預編譯程序，來點sass吧。 你可能已經想到了，再來個loader就行啦，確實是這樣簡單。

npm install sass-loader --save-dev

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

  {
    test: /.scss$/,
    loaders: ["style", "css", "sass"],
    include: APP_PATH
  },

添加兩個sass文件，variables.scss和main.scss

variables.scss

$red: red;

main.scss

@import "./variables.scss";

h1 {
  color: $red;
}

在index.js中引用

require("./main.scss");

然后發現標題如愿變紅，相當簡單吧。

處理圖片和其他靜態文件

這個和其他一樣，也許你也已經會玩了。安裝loader，處理文件。諸如圖片，字體等等，不過有個神奇的地方它可以根據你的需求將一些圖片自動轉成base64編碼的，為你減輕很多的網絡請求。

安裝url-loader

npm install url-loader --save-dev

配置config文件

  {
    test: /.(png|jpg)$/,
    loader: "url?limit=40000"
  }

注意后面那個limit的參數，當你圖片大小小于這個限制的時候，會自動啟用base64編碼圖片。

下面舉個栗子。

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

@import "./variables.scss";

h1 {
  color: $red;
  background: url("./imgs/avatar.jpg");
}

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

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

npm install jquery --save-dev

在js中引用

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現在都起作用了！

開發技巧

啟用source-map

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

  ...
  devtool: "eval-source-map",
  ...

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

配置webpack-dev-server代理

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

devServer: {
    hot: true,
    inline: true,
    //其實很簡單的，只要配置這個參數就可以了
    proxy: {
      "/api/*": {
          target: "http://localhost:5000",
          secure: false
      }
    }
}

重啟以后 發現/api/*的請求都代理到http://localhost:5000去了～
安裝jshint檢測js語法

npm install jshint-loader --save-dev

在config文件中配置

module: {
...
    //和loaders一樣的語法，很簡單
    perLoaders: [
        {
            test: /.jsx?$/,
            include: APP_PATH,
            loader: "jshint-loader"
        }
    ]
}

...
//配置jshint的選項，支持es6的校驗
jshint: {
  "esnext": true
},

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

  ...
  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和第三方庫

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

修改entry入口文件

  entry: {
    app: path.resolve(APP_PATH, "index.js"),
    //添加要打包在vendors里面的庫
    vendors: ["jquery", "moment"]
  },

添加CommonsChunkPlugin

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

添加完畢 運行npm run build
在build文件夾中發現如下結構

budle.js
index.html
vendors.js