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

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

}

如果配合模板中的函数：

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="{{ assets_url('app/index/index.js') }}"></script>

</head>

<body>

</body>

</html>

assets_url 函数可以直接获取 rev-manifest.json 内容，根据给定的 key 得到对应的构建文件的可访问路径，自动的根据不同的环境获取到正确的引用结果。

同时，我们可以在源代码目录里面，根据需求对代码进行模块化管理，构建出来的代码结构会和我们源代码中管理的一致。

这样一来，既可以享受构建系统的优势，又无需在新增或修改模块时改动 webpack.config.js，是不是很方便呢？

webpack 自动发现 entry 的配置和引用方式的更多相关文章

  1. Prometheus监控神技--自动发现配置

    一.自动发现类型 在上一篇文中留了一个坑: 监控某个statefulset服务的时候,我在service文件中定义了个EP,然后把pod的ip写死在配置文件中,这样,当pod重启后,IP地址变化,就监 ...

  2. discover功能--自动发现主机

    discover功能,让监控的管理更加管理和自动化,现在来演示下如何使用discover功能自动发现主机 1.配置discover 2.在被侦测机上安装zabbix agent 安装完成后,修改配置( ...

  3. 分布式监控系统Zabbix--完整安装记录-批量添加主机和自动发现端口

    一.Zabbix-3.0.3批量添加主机的配置如下: 0)被监控机上要安装zabbix_agent,并配置好zabbix_agentd.conf (如下172.29.8.50是zabbix_serve ...

  4. Zabbix自动发现之fping

    原文发表于cu:2016-06-21 Zabbix自动发现功能从配置流程上比较简单:Discovery与Action. 在做Zabbix的自动发现验证时,使用"ICMP ping" ...

  5. Zabbix 设置自动添加主机两种方法(自动注册、自动发现)

    在实际生产环境中,我们可能需要将很多台主机添加到 Zabbix Server 里,我们进行手动添加的话,会比较麻烦.费时,而且还容易出错.所以一般我们会设置主机自动注册.这样就比较方便. 官方文档链接 ...

  6. 015-Zabbix自动发现和自动注册

      前言 对于监控服务器越来越多的情况,如果还单独一个一个添加,那效率也太低,因此就要实现批量添加监控服务器的操作,Zabbix提供两种批量自动监控的方式: 自动发现:由服务端主动发起,Zabbix ...

  7. ZABBIX自动发现Redis端口并监控

    由于一台服务器开启许多Redis实例,如果一台一台的监控太耗费时间,也非常容器出错.这种费力不讨好的事情我们是坚决杜绝的,幸好ZABBIX有自动发现功能,今天我们就来用该功能来监控我们的Redis实例 ...

  8. zabbix-5.0自动发现

    1. 安装zabbix5.0 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.no ...

  9. 【转】outlook 2016 配置自动发现

    今天一部门经理换了高大上的终端,办公软件安装的是office 2016,在配置outlook的时候,懵逼了,没有exchange 选项,使用自动发现配置的时候,电脑没有加域,各种尝试,一直过不去,哎, ...

随机推荐

  1. 第9章 应用层（2）_动态主机配置协议（DHCP）

    2. 动态主机配置协议(DHCP) 2.1 静态地址和动态地址的应用场景 (1)静态地址应用场景 ①IP地址不经常更改的设备(如服务器地址) ②使用有规律的IP地址以便于管理(如学校机房为方便教师管理 ...

  2. spark 2.0.0集群安装与hive on spark配置

    1. 环境准备: JDK1.8 hive 2.3.4 hadoop 2.7.3 hbase 1.3.3 scala 2.11.12 mysql5.7 2. 下载spark2.0.0 cd /home/ ...

  3. Delphi获取本机的MAC地址

    Delphi获取本机的MAC地址: uses   NB30; function GetAdaPterInfo(lana: Char): string; var   Adapter: TAdapterS ...

  4. 通过 SSH 转发TCP连接数据

    设定 首先双方的/etc/ssh/sshd_config设定以下四项: AllowAgentForwarding yes AllowTcpForwarding yes GatewayPorts yes ...

  5. Java虚拟机------JVM分析工具

    主要介绍JVM的分析工具: jps jps:Java Virtual Machine Process Status Tool http://docs.oracle.com/javase/1.5.0/d ...

  6. How The Kernel Manages Your Memory.内核是如何管理内存的

    原文标题:How The Kernel Manages Your Memory 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精彩 ...

  7. django 之admin使用

    Admin注册 内容发布的部分由网站的管理员负责查看.添加.修改.删除数据,开发这些重复的功能是一件单调乏味.缺乏创造力的工作,为此,Django能够根据定义的模型类自动地生成管理模块. 1)准备工作 ...

  8. LeetCode 771 宝石和石头

    Input: J = "aA", S = "aAAbbbb" Output: 3 解:J为宝石字符串,S为包含宝石的字符串,J中的字母如果在S中出现数字就➕1 ...

  9. torando-ioloop生命周期

    https://stackoverflow.com/questions/5375220/how-do-i-stop-tornado-web-server?answertab=votes#tab-top ...

  10. [多线程]多线程（Thread、Runnable、Callable）

    1.继承Thread类,重写run方法 线程 是程序中的执行线程.Java 虚拟机允许应用程序并发地运行多个执行线程. 每个线程都有一个优先级,高优先级线程的执行优先于低优先级线程.每个线程都可以或不 ...