webpack 自动发现 entry 的配置和引用方式

binta 发布于2019-08-19 17:27 / 2957人阅读

摘要：同时，我们可以在源代码目录里面，根据需求对代码进行模块化管理，构建出来的代码结构会和我们源代码中管理的一致。这样一来，既可以享受构建系统的优势，又无需在新增或修改模块时改动，是不是很方便呢

假定我们的项目目录为如下的样子：

- 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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