webpack 自動發現 entry 的配置和引用方式

binta 發布于2019-08-19 17:27 / 3064人閱讀

摘要：同時，我們可以在源代碼目錄里面，根據需求對代碼進行模塊化管理，構建出來的代碼結構會和我們源代碼中管理的一致。這樣一來，既可以享受構建系統的優勢，又無需在新增或修改模塊時改動，是不是很方便呢

假定我們的項目目錄為如下的樣子：

- 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)
                );
            });
        }
    ]
};

這樣，我們就可以得到形如這樣的構建輸出：

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

意義何在？？？

關鍵在于 rev-manifest.json 文件，我們查看一下文件內容：

{
  "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",
}

意義何在？？？

好吧，我們再看一下在生產環境下的構建輸出：

{
  "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",
}

如果配合模板中的函數：




    
    Title

assets_url 函數可以直接獲取 rev-manifest.json 內容，根據給定的 key 得到對應的構建文件的可訪問路徑，自動的根據不同的環境獲取到正確的引用結果。

同時，我們可以在源代碼目錄里面，根據需求對代碼進行模塊化管理，構建出來的代碼結構會和我們源代碼中管理的一致。

這樣一來，既可以享受構建系統的優勢，又無需在新增或修改模塊時改動 webpack.config.js，是不是很方便呢？

云服務器 GPU云服務器 webpack引用jquery 服務自動發現 webpack cdn配置 webpack配置cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78543.html

webpack 構建性能優化策略小結

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

hiYoHoo 2019-08-21 11:21 評論0 收藏0
webpack 從入門到上線

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

Yumenokanata 2019-08-20 10:22 評論0 收藏0
從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
Webpack快速入門

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

laznrbfe 2019-08-20 18:13 評論0 收藏0
Webpack快速入門

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

curried 2019-08-29 12:58 評論0 收藏0