摘要：關(guān)于這個(gè)單頁(yè)面應(yīng)用大家可以直接去我的上查看，我將結(jié)合這個(gè)項(xiàng)目去介紹。

這篇文章將介紹如何利用 webpack 進(jìn)行單頁(yè)面應(yīng)用的開(kāi)發(fā)，算是我在實(shí)際開(kāi)發(fā)中的一些心得和體會(huì),在這里給大家做一個(gè)分享。webpack 的介紹這里就不多說(shuō)了，可以直接去官網(wǎng)查看。 關(guān)于這個(gè)單頁(yè)面應(yīng)用大家可以直接去我的github上查看https://github.com/huangshuwei/webpackForSPA，我將結(jié)合這個(gè)項(xiàng)目去介紹。如果大家覺(jué)得這篇文章有不妥的地方，還請(qǐng)指出。

這篇文章的目的是解決我們?cè)陂_(kāi)發(fā)中會(huì)遇到的問(wèn)題，不是一篇基礎(chǔ)教程，還請(qǐng)諒解。

我將根據(jù)這個(gè)目錄結(jié)構(gòu)進(jìn)行講解

dist：發(fā)布的文件目錄，即webpack編譯輸出的目錄

libs：放置公共的文件，如js、css、img、font等

mockServer：模擬后端服務(wù)，即用webpack開(kāi)發(fā)時(shí)模擬調(diào)用的后端服務(wù)（用nodejs服務(wù)模擬）

node_modules：項(xiàng)目依賴(lài)的包

src：資源文件，里面包含css、font、html、img、js

package.json：項(xiàng)目配置

webpack.config.js：webpack的配置文件

建議先運(yùn)行一下這個(gè)項(xiàng)目，有一個(gè)大致的了解，再往下閱讀。使用說(shuō)明：

首先克隆一份到你的本地
$ git clone https://github.com/huangshuwei/webpackForSPA.git

然后 cd 到 ‘webpackForSPA’目錄下
$ cd webpackForSPA

接著你可以運(yùn)行不同的命令查看結(jié)果

發(fā)布模式：
$ npm run build

開(kāi)發(fā)模式：
$ npm run dev

熱更新模式
$ npm run dev-hrm

如果使用了熱更新模式，并且想要結(jié)合后端服務(wù)形式運(yùn)行，那么cd 到‘mockServer’目錄下，并執(zhí)行node 服務(wù)：
$ cd mockServer

$ node server.js

一般開(kāi)發(fā)時(shí)和發(fā)布時(shí)是不同的，比如開(kāi)發(fā)時(shí)文件的訪問(wèn)目錄包含‘dist’目錄，但是發(fā)布上線時(shí)，一般會(huì)把‘dist’文件夾去掉。
當(dāng)然還有其他的一些細(xì)節(jié)不同。

開(kāi)發(fā)模式：

能看到webpack編譯輸出的文件

js、css、html文件不需要壓縮

可以正確的運(yùn)行編譯輸出后的文件

這種模式一般只是用來(lái)看webpack編譯輸出后的文件是否正確

熱更新模式：

看不到webpack編譯輸出的文件

js、css、html文件不需要壓縮

更改完文件后無(wú)需重新編譯并自動(dòng)刷新瀏覽器

可以結(jié)合后端服務(wù)開(kāi)發(fā)，避過(guò)瀏覽器同源策略，如結(jié)合java、.net服務(wù)等

發(fā)布模式：

能看到webpack編譯輸出的文件

js、css、html文件壓縮

文件的層級(jí)目錄不需要包含‘dist’目錄

我區(qū)分開(kāi)發(fā)、熱更新、發(fā)布模式是通過(guò)配置‘package.json’文件的運(yùn)行命令，有些人是通過(guò)創(chuàng)建多個(gè)不同的webpack的配置文件來(lái)達(dá)到想要的效果。

像這個(gè)項(xiàng)目就是使用了多個(gè)webpack的配置文件。

這是在 package.json 文件中配置的

// package.json 文件
...
"scripts": {
    "build": "webpack  --profile --progress --colors --display-error-details",
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details",
    "dev-hrm": "webpack-dev-server --config"
  },
...

color 輸出結(jié)果帶彩色，比如：會(huì)用紅色顯示耗時(shí)較長(zhǎng)的步驟

profile 輸出性能數(shù)據(jù)，可以看到每一步的耗時(shí)

progress 輸出當(dāng)前編譯的進(jìn)度，以百分比的形式呈現(xiàn)

display-modules 默認(rèn)情況下 node_modules 下的模塊會(huì)被隱藏，加上這個(gè)參數(shù)可以顯示這些被隱藏的模塊

display-error-details 輸出詳細(xì)的錯(cuò)誤信息

webpack-dev-server 將會(huì)開(kāi)啟熱更新

更多請(qǐng)參考官網(wǎng) cli

配置好了package.json文件,我們就可以這樣運(yùn)行

// 開(kāi)發(fā)模式
npm run dev

// 熱更新模式
npm run dev-hrm

// 發(fā)布模式
npm run build

配置完了命令，當(dāng)我們運(yùn)行不同的命令時(shí)，我們可以通過(guò)‘process.env.npm_lifecycle_event’去獲取當(dāng)前運(yùn)行的命令，根據(jù)不同的命令，我們可以按照自己的需要做相應(yīng)的處理。比如開(kāi)發(fā)模式時(shí)，允許開(kāi)啟調(diào)試，靜態(tài)資源不要壓縮；發(fā)布模式時(shí)，不允許調(diào)試，靜態(tài)資源要壓縮。具體如下：

// webpack.config.js

// 獲取當(dāng)前運(yùn)行的模式
var currentTarget = process.env.npm_lifecycle_event;

var debug,          // 是否是調(diào)試
    devServer,      // 是否是熱更新模式
    minimize;       // 是否需要壓縮

if (currentTarget == "build") { // 發(fā)布模式

    debug = false, devServer = false, minimize = true;
    
} else if (currentTarget == "dev") { // 開(kāi)發(fā)模式

    debug = true, devServer = false, minimize = false;
    
} else if (currentTarget == "dev-hrm") { // 熱更新模式

    debug = true, devServer = true, minimize = false;
}

為了方便我們頻繁使用路徑，如下配置

// webpack.config.js
var PATHS = {
    // 發(fā)布目錄
    publicPath: debug ? "/webpackForSPA/dist/" : "/webpackForSPA/",

    // 公共資源目錄
    libsPath: path.resolve(process.cwd(), "./libs"),
    
    // src 資源目錄
    srcPath: path.resolve(process.cwd(), "src"),
}

webpack的別名的目的就是簡(jiǎn)化我們的操作，引用資源時(shí)直接使用別名即可（和 seajs 里的別名用法一樣）。配置如下：

// webpack.config.js
...
resolve:{
     alias: {
        // js
        jquery: path.join(PATHS.libsPath, "js/jquery/jquery"),
        underscore: path.join(PATHS.libsPath, "js/underscore/underscore.js"),

        // css
        bootstrapcss: path.join(PATHS.libsPath, "css/bootstrap/bootstrap-3.3.5.css"),
        indexcss: path.join(PATHS.srcPath, "css/index.css"),
    }
}
...

// webpack.config.js
...
entry:{
    // 入口 js
    index: "./src/js/index.js",
    // 公共js包含的文件
    common: [
        path.join(PATHS.libsPath, "js/jquery/jquery.js"),
        path.join(PATHS.libsPath, "js/underscore/underscore.js")
    ],
}
...

// webpack.config.js
...
output：{
    // 輸出目錄
    path: path.join(__dirname, "dist"),

    // 發(fā)布后，資源的引用目錄
    publicPath: PATHS.publicPath,

    // 文件名稱(chēng)
    filename: "js/[name].js",

    // 按需加載模塊時(shí)輸出的文件名稱(chēng)
    chunkFilename: "js/[name].js"
}
...

當(dāng)我們?cè)趈s文件中通過(guò)require("")引用js時(shí)，webpack 默認(rèn)會(huì)將css文件與當(dāng)前js文件打包一起，但是這種方式會(huì)阻塞頁(yè)面的加載，因?yàn)閏ss的執(zhí)行要等待js文件加載進(jìn)來(lái)。所以我們會(huì)把css從js文件中提取出來(lái)，放到一個(gè)多帶帶的css文件中。這時(shí)我們要使用webpack的插件：extract-text-webpack-plugin，配置如下：

引入插件

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");

配置 loader

// webpack.config.js
...
loaders: [
    {
        test: /.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
    },
    ...
]
...

配置 plugins

// webpack.config.js
...
plugins:[
    new ExtractTextPlugin("css/[name].css", {allChunks: true}),
    ...
]
...

項(xiàng)目中，我們通常會(huì)有公共的js，比如 jquery、bootstrap、underscore 等，那么這時(shí)候我們需要將這些公共的js多帶帶打包。這時(shí)我們需要用webpack自帶的插件：

// webpack.config.js
...
plugins:[
    // 會(huì)把 ‘entry’ 定義的 common 對(duì)應(yīng)的兩個(gè)js 打包為 ‘common.js’
    new webpack.optimize.CommonsChunkPlugin("common", "js/[name].js", Infinity),
]
...

項(xiàng)目上線后，資源的版本號(hào)十分重要。資源沒(méi)有版本號(hào)，即使重新發(fā)布，客戶端瀏覽器可能會(huì)把老的資源緩存下來(lái)，導(dǎo)致無(wú)法下載最新的資源。webpack 支持給資源添加版本號(hào)，不僅僅是js、css,甚至font、img都可以添加版本號(hào)。我們可以通過(guò)webpack中的‘chunkhash’來(lái)解決。

首先要了解下webpack 中 [hash]、[chunkhash]、[chunkhash:8]的區(qū)別。

[hash]：webpack編譯會(huì)產(chǎn)生一個(gè)hash值

[chunkhash]：每個(gè)模塊的hash值

[chunkhash:8]：取[chunkhash]的前8位

推薦發(fā)布模式使用版本號(hào)，其他模式無(wú)需使用，熱更新模式不支持‘chunkhash’，但是支持‘hash’

資源加版本號(hào)，那么我們的輸出的部分都要做改動(dòng)，并且要區(qū)分當(dāng)前的命令模式，如下：

// webpack.config.js
...
output：{
    // 輸出目錄
    path: path.join(__dirname, "dist"),

    // 發(fā)布后，資源的引用目錄
    publicPath: PATHS.publicPath,

    // 文件名稱(chēng)
    filename: devServer ? "js/[name].js" : "js/[name]-[chunkhash:8].js",

    // 按需加載模塊時(shí)輸出的文件名稱(chēng)
    chunkFilename: devServer ? "js/[name].js" : "js/[name]-[chunkhash:8].js"
}
...

輸出公共js的地方也要改動(dòng)：

// webpack.config.js
...
plugins:[
    // 會(huì)把 ‘entry’ 定義的 common 對(duì)應(yīng)的兩個(gè)js 打包為 ‘common.js’
    new webpack.optimize.CommonsChunkPlugin("common", "" + (devServer ? "js/[name].js" : "js/[name]-[chunkhash:8].js"), Infinity),
]
...

有個(gè)版本號(hào)后，我們考慮如何通過(guò)html引用這些含有版本號(hào)的js、css、font、img。webpack每次編譯后的資源 chunkhash 會(huì)隨著內(nèi)容的變化而變化，所以我們不可能每次都手動(dòng)的更改html這些資源的引用路徑。這時(shí)我們要用到webpack的插件：html-webpack-plugin。這個(gè)插件的目的是生成html,也可以根據(jù)模板生成html，當(dāng)然還有其他的功能，具體看插件介紹。下面是的配置：

引入插件

// webpack.config.js
var HtmlWebpackPlugin = require("html-webpack-plugin");

配置 plugins，生成需要的html

// webpack.config.js
...
plugins:[
    new HtmlWebpackPlugin({
        filename: "index.html",
        template: __dirname + "/src/index.html",
        inject: "true"
    }),
    new HtmlWebpackPlugin({
        filename: "html/hrm.html",
        template: __dirname + "/src/html/hrm.html",
        inject: false,
    }),
    new HtmlWebpackPlugin({
        filename: "html/home.html",
        template: __dirname + "/src/html/home.html",
        inject: false,
    }),
]
...

我們前面說(shuō)過(guò)，webpack 默認(rèn)只識(shí)別 js 文件，所以對(duì)于html也要使用對(duì)應(yīng)的loader:

// webpack.config.js
...
loaders:[
     {test: /.html$/,loader: "html"},
]
...

引用圖片和字體，需要對(duì)應(yīng)的loader,并且可以設(shè)置這些資源大小的臨界值，當(dāng)小于臨界值的時(shí)候，字體或者圖片文件會(huì)以base64的形式在html引用，否則則是以資源路徑的形式引用。如下：

// webpack.config.js

// 圖片 loader
{
    test: /.(png|gif|jpe?g)$/,
    loader: "url-loader",
    query: {
        /*
         *  limit=10000 ： 10kb
         *  圖片大小小于10kb 采用內(nèi)聯(lián)的形式，否則輸出圖片
         * */
        limit: 10000,
        name: "/img/[name]-[hash:8].[ext]"
    }
},

// 字體loader
{
    test: /.(eot|woff|woff2|ttf|svg)$/,
    loader: "url-loader",
    query: {
        limit: 5000,
        name: "/font/[name]-[hash:8].[ext]"
    }
},

js、css、html的壓縮是少不了的，webpack 自帶了壓縮插件，如果某些對(duì)象名稱(chēng)不想被壓縮，可以排除不想要壓縮的對(duì)象名稱(chēng)。配置如下：

// webpack.config.js
...
plugins:[
    new webpack.optimize.UglifyJsPlugin({ 
            mangle: { // 排除不想要壓縮的對(duì)象名稱(chēng)
                except: ["$super", "$", "exports", "require", "module", "_"]
            },
            compress: {
                warnings: false
            },
            output: {
                comments: false,
            }
        })
]
...

通過(guò)webpack編譯輸出后的項(xiàng)目中，雖然頁(yè)面已經(jīng)引用了jquery、underscore,但是還是無(wú)法直接使用‘$’、‘_’對(duì)象，我們可以這樣：

var $ = require("jquery")；
var _ =  require("underscore")；

但是這樣實(shí)在不方便，如果我們就是要使用‘$’、‘_’對(duì)象直接操作，webpack 內(nèi)置的插件可以幫我們解決。具體如下：

// webpack.config.js
new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "_": "underscore",
    }),

在單頁(yè)面應(yīng)用中，當(dāng)我們加載其他的模板文件時(shí)，想要引用這個(gè)模板文件對(duì)應(yīng)的js。如果我們通過(guò)這種方式require(),那么webpack會(huì)將這個(gè)模板文件對(duì)應(yīng)的js也會(huì)和當(dāng)前js打包成一個(gè)js。如果項(xiàng)目比較大，那么js文件也將越來(lái)越大。我們希望的是加載模板文件的時(shí)候動(dòng)態(tài)的引用這個(gè)模板文件對(duì)應(yīng)的js。那么我們可以通過(guò) require.ensure()的方式。

比如現(xiàn)在有兩個(gè)導(dǎo)航菜單：

home
HRM

我們給這兩個(gè)菜單綁定點(diǎn)擊事件，當(dāng)點(diǎn)擊‘home’時(shí)引用對(duì)應(yīng)的‘home.js’;當(dāng)點(diǎn)擊‘HRM’時(shí)引用對(duì)應(yīng)的‘hrm.js’,那么大致可以這樣：

function loadJs(jsPath) {
    var currentMod;
    if (jsPath === "./home") {
        require.ensure([], function (require) {
            currentMod = require("./home");
        }, "home");
    }
    else if (jsPath === "./hrm") {
        require.ensure([], function (require) {
            currentMod = require("./hrm");
        }, "hrm");
    }
}

有時(shí)我們只有在開(kāi)發(fā)過(guò)程中，才想輸出log日志?？梢杂靡韵聎ebpack內(nèi)置的插件解決：

// webpack.config.js
...
plugins:[
      new webpack.DefinePlugin({
        // 全局debug標(biāo)識(shí)
        __DEV__: debug,
    }),

]
...

這時(shí)代碼中就可以這么寫(xiě)了：

if (__DEV__) {
    console.log("debug 模式");
}

發(fā)布前清空發(fā)布目錄是有必要的，我們可以通過(guò)‘clean-webpack-plugin’插件解決：

引入插件：

// webpack.config.js
var CleanWebpackPlugin = require("clean-webpack-plugin");

配置plugins:

// webpack.config.js
...
plugins:[
    new CleanWebpackPlugin(["dist"], {
        root: "", // An absolute path for the root  of webpack.config.js
        verbose: true,// Write logs to console.
        dry: false // Do not delete anything, good for testing.
    }),
]
...

熱更新可以在你代碼改變的時(shí)候即時(shí)編譯輸出，不用每次都要從都重新編譯一遍，并且除了第一次編譯比較慢，后面的編譯都是增量編譯，速度很快。有了這個(gè)功能，我們就不需要，每次都從頭編譯一次了。配置如下：

// webpack.config.js
...
plugins: [
        // Enable multi-pass compilation for enhanced performance
        // in larger projects. Good default.
        new webpack.HotModuleReplacementPlugin({
            multiStep: true
        }),
],
devServer: {
        // Enable history API fallback so HTML5 History API based
        // routing works. This is a good default that will come
        // in handy in more complicated setups.
        historyApiFallback: true,

        // Unlike the cli flag, this doesn"t set
        // HotModuleReplacementPlugin!
        hot: true,
        inline: true,

        // Display only errors to reduce the amount of output.
        stats: "errors-only",

        host: "localhost", // Defaults to `localhost`   process.env.HOST
        port: "8080",  // Defaults to 8080   process.env.PORT
}
...

這時(shí)我們只要打開(kāi)瀏覽器，輸入：localhost:8080/ 就能看到結(jié)果，并且在你修改某些源文件后，瀏覽器會(huì)自動(dòng)刷新，就能看到webpack 即時(shí)編譯輸出的結(jié)果，而不需要重新編譯。

我們?cè)谑褂脀ebpack開(kāi)發(fā)時(shí)難免要結(jié)合后端服務(wù)開(kāi)發(fā)，比如我們用webstorm 編譯器開(kāi)發(fā)項(xiàng)目，需要調(diào)用java的服務(wù)，由于有同源策略問(wèn)題，這時(shí)我們會(huì)收到相關(guān)報(bào)錯(cuò)信息。這時(shí)我們可以通過(guò)代理的方式繞過(guò)同源策略。
這里我用nodejs 模擬一個(gè)后端服務(wù)，如下：

// ~/mockServer/server.js

var http = require("http");

var content = "▍if you see that,It means you have get the correct data by backend server(mock data by nodejs server)!";

var srv = http.createServer(function (req, res) {
    res.writeHead(200, {"Content-Type": "application/text"});
    res.end(content);
});

srv.listen(8888, function() {
    console.log("listening on localhost:8888");
});

接下來(lái)我們需要這樣配置去調(diào)用這個(gè)nodejs 的服務(wù)。
首先將熱更新配置的代碼修改為：

// webpack.config.js
...
plugins: [
        // Enable multi-pass compilation for enhanced performance
        // in larger projects. Good default.
        new webpack.HotModuleReplacementPlugin({
            multiStep: true
        }),
],
devServer: {
        // Enable history API fallback so HTML5 History API based
        // routing works. This is a good default that will come
        // in handy in more complicated setups.
        historyApiFallback: true,

        // Unlike the cli flag, this doesn"t set
        // HotModuleReplacementPlugin!
        hot: true,
        inline: true,

        // Display only errors to reduce the amount of output.
        stats: "errors-only",

        host: "localhost", // Defaults to `localhost`   process.env.HOST
        port: "8080",  // Defaults to 8080   process.env.PORT
        proxy: {
                "/devApi/*": {
                    target: "http://localhost:8888/",
                    secure: true,
                    /*
                     * rewrite 的方式擴(kuò)展性更強(qiáng)，不限制服務(wù)的名稱(chēng)
                     * */
                    rewrite: function (req) {
                        req.url = req.url.replace(/^/devApi/, "");
                    }
                }
        }
}
...

然后配置一個(gè)全局的環(huán)境變量，通過(guò)DefinePlugin：

// webpack.config.js
...
plugins: [
 new webpack.DefinePlugin({
        __DEVAPI__: devServer ? "/devApi/" : """",
    }),
]
...

最后在調(diào)用服務(wù)的地方，只需要在調(diào)用地址前添加 __DEVAPI__全局環(huán)境變量即可，如：

$.ajax({
        url: __DEVAPI__ + "http://localhost:8888/",
        data: {},
        type: "get",
        dataType: "text",
        success: function (text) {}
    })

這樣在熱更新的模式下，當(dāng)有__DEVAPI__ 的地方就會(huì)自動(dòng)識(shí)別為/devApi/，而這里會(huì)通過(guò)代理處理幫你重寫(xiě)掉，繞過(guò)同源策略。

雖然以上的工作幾乎已經(jīng)滿足我們對(duì)webpack的要求了，但是我們還想懶一點(diǎn)，想在熱更新模式下，編譯完成后自動(dòng)打開(kāi)瀏覽器。那么我們可以通過(guò)這個(gè)插件open-browser-webpack-plugin解決：

引用插件

// webpack.config.js
var OpenBrowserPlugin = require("open-browser-webpack-plugin");

配置插件，這個(gè)配置要根據(jù)項(xiàng)目的具體情況去配置：

// webpack.config.js
...
plugins: [
 new OpenBrowserPlugin({url: "http://localhost:8080" + PATHS.publicPath + "index.html"})
]
...

以上就是這篇文章的主要內(nèi)容，希望通過(guò)這篇文章能夠給大家?guī)?lái)一些啟發(fā)。如果有覺(jué)得哪里不對(duì)，或者不合理的地方，歡迎指出。其實(shí)webpack還有一個(gè)關(guān)于版本號(hào)的bug，不知道是不是有人解決了，如果有人已經(jīng)解決了，還請(qǐng)分享。