一項(xiàng)技術(shù)、一個(gè)工具的出現(xiàn)，肯定是為了解決問(wèn)題的。那么，webpack 是為了解決什么問(wèn)題？答案是：文件依賴管理。瀏覽器端的 Js, 出于安全的考慮，對(duì)本地文件沒有操作權(quán)限，不能引用其它 js, css 等文件。而 webpack 就是用來(lái)解決這個(gè)問(wèn)題的，讓你的項(xiàng)目可以很好地分文件、分模塊，而且它對(duì)外部文件的引入同時(shí)支持 cmd, amd 和 commondJs 這三種形式，夠有誠(chéng)意。
或許你要說(shuō)了，解決文件依賴，早在 require.js 和 sea.js 的時(shí)候，都已經(jīng)解決了呀！那么，webpack 在這方面，有哪些新的突破：

支持引用各種拓展名的文件

能夠在不依賴 gulp 或 grunt 的情況下直接產(chǎn)出打包文件

支持實(shí)時(shí)編譯，瀏覽器同步刷新

這個(gè)時(shí)候，是不是很想唱一下王力宏的《唯一》：確定你就是我的唯一！
OK，進(jìn)入正題。

目前，我們的項(xiàng)目目錄結(jié)構(gòu)是這樣的：

webpack_demo
|--src
|  |--pages
|  |  |--index
|  |  |  |--index.js
|--views_dev
|  |--index.html
|--webpack.config.js
|--package.json

在項(xiàng)目的根目錄執(zhí)行：

$ npm init // 生成項(xiàng)目依賴文件配置 package.json
$ npm install webpack -g // 全局安裝webpack
$ touch webpack.config.js // 在項(xiàng)目根目錄下，新建 webpack.config.js 文件

然后，在以下3個(gè)文件，輸入內(nèi)容：

頁(yè)面 HTML 文件

// views_dev/index.html



    
    


    
哈嘍，world
    

頁(yè)面引用的 js 文件

// src/pages/index/index.js
console.log("I am in index/index.js, haha4");

webpack 打包配置

// webpack.config.js
module.exports = {
// 入口：要進(jìn)行處理的實(shí)例（js）
entry: "./src/pages/index/index.js",
// 出口：輸出配置
output: {
    // 輸出到哪個(gè)目錄
    path: "./asset/dev/",
    // 靜態(tài)資源的引用路徑
    publicPath: "/asset/dev/",
    // 實(shí)例最終輸出的名字
    filename: "[name].js"
}
};

運(yùn)行 webpack 命令，進(jìn)行打包。

$ webpack

然后，搞定了，此時(shí)用瀏覽器打開 views_dev/index.html 這個(gè)文件，你會(huì)發(fā)現(xiàn)，打包成功了！

好的，你入門了，哈哈！接下去，我會(huì)詳細(xì)介紹單個(gè)頁(yè)面打包、多個(gè)頁(yè)面打包，以及最后的發(fā)布上線。Now, go ~

這里，你將學(xué)到：

引入其它 js 文件。是的，你將學(xué)會(huì) 模塊化。

引入其它類型的文件，以 css 為例。

實(shí)時(shí)編譯 + 瀏覽器同步刷新。爽！

現(xiàn)在，我們的項(xiàng)目目錄，是這樣：

webpack_demo
|--src
|  |--pages
|  |  |--index
|  |  |  |--index.js
|  |  |  |--test.js
|  |  |  |--index.css
|  |--plugins
|  |  |--dialog
|  |  |  |--dialog.css
|  |  |  |--dialog.js
|--views_dev
|  |--index.html
|--webpack.config.js
|--package.json

通過(guò)相對(duì)路徑
現(xiàn)在，我們要在 src/pages/index.js 里面引入 src/pages/test.js 文件。這樣做就可以了：

var Test = require("./test.js");

你也許會(huì)問(wèn)，此時(shí)，var Test 這個(gè)變量，得到的是什么？換個(gè)說(shuō)法，怎么控制 test.js 被導(dǎo)出到外部的內(nèi)容。答案是：通過(guò) module.exports. 例如：

// index/test.js
var str = "I am in test.js";
module.exports = str;

那么，require("./test.js") 的值就是 "I am in test.js" 這個(gè)字符串。module.exports 可以導(dǎo)出任何值。比如，我們要導(dǎo)出 Object.

module.exports = {
  aa: "axxx",
  b: function() {}
};

通過(guò)別名或模塊
如果只能使用相對(duì)路徑，那 webpack 就太不靠譜了。因?yàn)閷⒂锌赡艹霈F(xiàn)這樣 ../../../../libs/libs-tost/toast.js, 啊，想死！那么，怎么通過(guò)別名引入文件呢？假如，我們想引入 src/plugins/dialog/dialog.js 這個(gè)彈窗。

在 webpack.config.js 中，配置別名

// webpack.config.js
module.exports = {
    resolve: {
        // 定義別名
        alias: {
            plugins: "D:/your/path/webpack_demo/src/plugins", // 別名可以是目錄
            myDialog: "D:/your/path/webpack_demo/src/plugins/dialog/dialog.js" // 也可以是文件
        }
    }
}

可以使用了

// src/index/index.js
var Dialog = require("plugins/dialog/dialog.js"); // 方式一
var Diaglog = require("myDialog"); // 方式二

說(shuō)明：require(TagPath) 的 TagPath 如果以單詞開頭，將被認(rèn)為是模塊匹配，它會(huì)去找 node_modules 和 resolve.alias 下的模塊（或別名）。以方式一為例，它的TagPath 是以 plugins 開頭（注意下：/plugins 和 ./plugins 都不叫以單詞開頭），所以可以順利匹配到 resolve.alias.plugins. 在實(shí)際應(yīng)用中，你經(jīng)常會(huì)看到 require("jquery"), require("vue"), require("react"), 這些就是匹配到 node_modules 下已安裝的模塊。

webpack 的強(qiáng)大之處是，它允許你引入任何文件，比如：css, jpg, png. 那么，問(wèn)題來(lái)了，對(duì)于不同的文件，它要怎么知道該如何分開處理呢？

// webpack.config.js
module.exports = {
    module: {
        loaders: [{
            test: /.css$/,
            loader: "style!css"
        }, {
            test: /.js$/,
            loader: "babel"
        }]
    }
};

上面的配置是說(shuō)，對(duì)于拓展名是 .css 的文件，使用加載器 style!css（這邊中間有一個(gè)感嘆號(hào)，意思是：先是用 css 加載器處理，然后使用 style 加載器處理）。完整的寫法是：style-loader!css-loader, 其中，-loader可以省略。而這里的，style-loader 和 css-loader 就需要你 npm 安裝下了。

$ npm i style-loader -D
$ npm i css-loader -D

對(duì)于其它拓展名的處理，也是用同樣的方式來(lái)處理。

你肯定希望，這樣的功能。那么，開始吧，喝杯咖啡！

自動(dòng)編譯
如果你只是想支持自動(dòng)編譯，那么很簡(jiǎn)單。只要運(yùn)行 $ webpack -w 就可以開啟它的自動(dòng)編譯功能。

用 webpack-dev-server 實(shí)現(xiàn)：自動(dòng)編譯 + 瀏覽器同步刷新

首先，你需要安裝 webpack-dev-server 這個(gè)包。

$ npm i webpack-dev-server -D

然后，我簡(jiǎn)單介紹下它：webpack-dev-server 文檔

運(yùn)行時(shí)，它會(huì)啟動(dòng)一個(gè)本地 Node 服務(wù)器，默認(rèn)端口8080. 即：localhost:8080. 并且自動(dòng)識(shí)別當(dāng)前目錄下的 webpack.config.js 文件，來(lái)作為 webpack 配置文件。

產(chǎn)出的編譯后文件，不在 output.path 里，而在它自己定義的內(nèi)存。

行內(nèi)參數(shù)說(shuō)明：

inline: 使用命令行模式。

content-base: 指定網(wǎng)站的根地址，如果你想指定為項(xiàng)目根目錄，那么 --content-base ./

hot: 開啟熱替換。一般用在 React 和 Vue 當(dāng)中，我們這里不用。

好了，那么，啟動(dòng)它吧：

$ webpack-dev-server  --inline --content-base ./

然后，你在瀏覽器中，訪問(wèn) http://localhost:8080/views_dev/index.html 就會(huì)發(fā)現(xiàn)，你修改代碼的時(shí)候，實(shí)時(shí)編譯，并且瀏覽器同步刷新了。（不過(guò)，要補(bǔ)充一下，觸發(fā) webpack 重新編譯時(shí)，才能同步刷新瀏覽器。意味著，你修改 views_dev/*.html 的 HTML 文件時(shí)，瀏覽器，不會(huì)被刷新，因?yàn)樗粫?huì)觸發(fā) webpack 重新編譯。）

現(xiàn)在，我們加一點(diǎn)點(diǎn)配置，讓它支持多個(gè)頁(yè)面打包。之前，它是這樣的：

module.exports = {
    // 入口：要進(jìn)行處理的實(shí)例（js）
    entry: "./src/pages/index/index.js",
    // 出口：輸出配置
    output: {
        // 輸出到哪個(gè)目錄
        path: "./asset/dev/",
        // 靜態(tài)資源的引用路徑
        publicPath: "/asset/dev/",
        // 實(shí)例最終輸出的名字
        filename: "[name].js"
    },
    // 其它配置...
};

現(xiàn)在，我們需要改下 entry 的配置，如下：

entry: {
    index: "./src/pages/index/index.js",
    list: "./src/pages/list/index.js",
    common: [
        "./src/base/base.js",
        "./src/base/base.css"
    ]
}

上面的配置意思是，會(huì)獨(dú)立打包3個(gè)實(shí)體。分別是 index, list, common. 知識(shí)點(diǎn)如下：

它支持多個(gè)文件打包在一起，如這里的 common 的配置。我們一般，用來(lái)放公共基礎(chǔ)包。

我們看到 output.filename = [name].js，這里的 [name] 取自于 entry 的 key 值。意味著，他們最終打包的輸出是：

webpack_demo
|--asset
|  |--dev
|  |  |--index.js
|  |  |--list.js
|  |  |--common.js

發(fā)布上線，需要做什么呢？也許是這樣：

把靜態(tài)資源生成到一個(gè)獨(dú)立的目錄下

壓縮

加上 md5

html 和 css 中，引用的靜態(tài)資源需要替換。

哈哈，或許你還能想到很多。我就上面4步來(lái)說(shuō)下實(shí)現(xiàn)方式。開始之前，我們一般會(huì)這么做：新建一個(gè) webpack 的配置文件，用來(lái)做上線發(fā)布的配置。比如，我們同樣放在根目錄下，命名 webpack.config.build.js. 此時(shí)，你可以這樣做：

$ webpack -p --config webpack.config.build.js

這里的 -p 是 production 模式的意思，它會(huì)對(duì) css, js 文件進(jìn)行壓縮。后面 --config 就是指定此次運(yùn)行的配置文件。

然后，我們來(lái)解決上面的4個(gè)要求：

把靜態(tài)資源生成到一個(gè)獨(dú)立的目錄下 + md5 + css引用的資源替換

// webpack.config.build.js
module.exports = {
    output: {
        path: "./asset/build/", // 文件編譯輸出路徑改成 build
        publicPath: "http://yourweb.com/asset/build/", // 這里替換成線上實(shí)際地址，可以修改 css 中對(duì)圖片資源的引用路徑。
        filename: "[name]_[hash:5].js" // 生成的文件名字，加上了5位的 hash值。當(dāng)然了，位數(shù)和加hash的位置，你可以自己定義，比如 "[name].js?[hash]".
    },
    // 其它配置...
};

壓縮。用 webpack -p 解決了。

替換 HTML 中靜態(tài)資源的路徑?？梢杂?webpack 的插件，html-webpack-plugin 來(lái)做?；蛘?，你對(duì) gulp 還是比較熟悉的話，用 gulp-prefix 來(lái)實(shí)現(xiàn)。這里就不詳細(xì)寫配置了。

然后，恭喜你看完了！