成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack 自動(dòng)發(fā)現(xiàn) entry 的配置和引用方式

binta / 3074人閱讀

摘要：同時(shí)，我們可以在源代碼目錄里面，根據(jù)需求對(duì)代碼進(jìn)行模塊化管理，構(gòu)建出來(lái)的代碼結(jié)構(gòu)會(huì)和我們?cè)创a中管理的一致。這樣一來(lái)，既可以享受構(gòu)建系統(tǒng)的優(yōu)勢(shì)，又無(wú)需在新增或修改模塊時(shí)改動(dòng)，是不是很方便呢

假定我們的項(xiàng)目目錄為如下的樣子：

- root/
    - assets/
        - app/
            - global.js
            - index/
                - index.js
            - auth/
                - login.js
                - register.js
                - ...
        - webpack.config.js
    - public/
        - assets/
            - build/

使用如下的 webpack 配置：

var webpack = require("webpack");
var fs = require("fs");
var path = require("path");
var glob = require("glob");

const debug = process.env.NODE_ENV !== "production";

function entries (globPath) {
    var files = glob.sync(globPath);
    var entries = {}, entry, dirname, basename;

    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);
        basename = path.basename(entry, ".js");
        entries[path.join(dirname, basename)] = "./" + entry;
    }

    return entries;
}

module.exports = {
    entry: entries("app/**/*.js"),
    output: {
        path: path.join(__dirname, "..", "public", "assets", "build"),
        publicPath: "/assets/build/",
        filename: "[name]" + (debug ? "" : "-[chunkhash]") + ".js",
        chunkFilename: "[id]" + (debug ? "" : "-[chunkhash]") + ".js"
    },
    plugins: [
        function () {
            this.plugin("done", function (stats) {
                stats = stats.compilation.getStats().toJson({
                    hash: true,
                    publicPath: true,
                    assets: true,
                    chunks: false,
                    modules: false,
                    source: false,
                    errorDetails: false,
                    timings: false
                });

                var json = {}, chunk;
                for (var key in stats.assetsByChunkName) {
                    if (stats.assetsByChunkName.hasOwnProperty(key)) {
                        chunk = stats.assetsByChunkName[key];
                        json[key + ".js"] = chunk[0];
                    }
                }

                fs.writeFileSync(
                    path.join(__dirname, "..", "public", "assets", "build", "rev-manifest.json"),
                    JSON.stringify(json, null, 2)
                );
            });
        }
    ]
};

這樣，我們就可以得到形如這樣的構(gòu)建輸出：

- root/
    - assets/
        - ...
    - public/
        - assets/
            - build/
                - rev-manifest.json
                - app/
                    - global.js
                - auth/
                    - login.js
                    - register.js
                    - ...

意義何在？？？

關(guān)鍵在于 rev-manifest.json 文件，我們查看一下文件內(nèi)容：

{
  "app/global.js": "app/global.js",
  "app/index/index.js": "app/index/index.js",
  "app/auth/login.js": "app/auth/login.js",
  "app/auth/register.js": "app/auth/register.js",
}

意義何在？？？

好吧，我們?cè)倏匆幌略谏a(chǎn)環(huán)境下的構(gòu)建輸出：

{
  "app/global.js": "app/global-6ff91e44b26765ae797a.js",
  "app/index/index.js": "app/index/index-d294c62e36a91fa7237d.js",
  "app/auth/login.js": "app/auth/login-f04b1d5a3cffac4d70aa.js",
  "app/auth/register.js": "app/auth/register-502d794e8e0c7f1a230d.js",
}

如果配合模板中的函數(shù)：




    
    Title

assets_url 函數(shù)可以直接獲取 rev-manifest.json 內(nèi)容，根據(jù)給定的 key 得到對(duì)應(yīng)的構(gòu)建文件的可訪問(wèn)路徑，自動(dòng)的根據(jù)不同的環(huán)境獲取到正確的引用結(jié)果。

同時(shí)，我們可以在源代碼目錄里面，根據(jù)需求對(duì)代碼進(jìn)行模塊化管理，構(gòu)建出來(lái)的代碼結(jié)構(gòu)會(huì)和我們?cè)创a中管理的一致。

這樣一來(lái)，既可以享受構(gòu)建系統(tǒng)的優(yōu)勢(shì)，又無(wú)需在新增或修改模塊時(shí)改動(dòng) webpack.config.js，是不是很方便呢？

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78543.html

相關(guān)文章

  • webpack 構(gòu)建性能優(yōu)化策略小結(jié)

    摘要：但是，隨者工程開(kāi)發(fā)的復(fù)雜程度和代碼規(guī)模不斷地增加，暴露出來(lái)的各種性能問(wèn)題也愈發(fā)明顯，極大的影響著開(kāi)發(fā)過(guò)程中的體驗(yàn)。對(duì)應(yīng)的資源也可以直接由頁(yè)面外鏈載入，有效地減小了資源包的體積。 背景 如今前端工程化的概念早已經(jīng)深入人心，選擇一款合適的編譯和資源管理工具已經(jīng)成為了所有前端工程中的標(biāo)配，而在諸多的構(gòu)建工具中，webpack以其豐富的功能和靈活的配置而深受業(yè)內(nèi)吹捧，逐步取代了grunt和gu...

    hiYoHoo 評(píng)論0 收藏0

  • webpack 從入門到上線

    webpack 是什么 showImg(https://segmentfault.com/img/bVzLhA?w=2598&h=1299); 一項(xiàng)技術(shù)、一個(gè)工具的出現(xiàn)，肯定是為了解決問(wèn)題的。那么，webpack 是為了解決什么問(wèn)題？答案是：文件依賴管理。瀏覽器端的 Js, 出于安全的考慮，對(duì)本地文件沒(méi)有操作權(quán)限，不能引用其它 js, css 等文件。而 webpack 就是用來(lái)解決這個(gè)問(wèn)題的，讓...

    Yumenokanata 評(píng)論0 收藏0

  • 從零開(kāi)始的webpack生活-0x001：webpack初次相逢

    摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過(guò)程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。 0x001 概述 其實(shí)我不知道怎么寫(xiě)，所以決定就一塊一塊的寫(xiě)點(diǎn)平常配置的過(guò)程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

    Turbo 評(píng)論0 收藏0

  • Webpack快速入門

    摘要：了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊，返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來(lái), 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...

    laznrbfe 評(píng)論0 收藏0

  • Webpack快速入門

    摘要：了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊，返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來(lái), 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...

    curried 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<