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

- 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. Centos7修改系统时区timezone

    第一步:查询服务器时间 [root@localhost ~]# timedatectl Local time: Sat 2018-03-31 01:11:46 UTC Universal time: ...

  2. (转）MTU&MSS

    MTU是Maximum Transmission Unit的缩写,意为最大传输单元,通俗的理解就是在网络上传送的最大数据包,单位是字节. 以太网对数据帧的长度都有一个限制,其最大值为1500,这个特性 ...

  3. DNS污染

    参考链接:http://blog.csdn.net/charleslei/article/details/50117761 DNS污染: DNS污染,又称域名服务器缓存污染(DNS cache pol ...

  4. winfrom 控件的显示隐藏方法

    使用Panel作为容器 Panel2.Visible = true; //显示 Panel1.Visible = false; //隐藏

  5. day17常用模块1记忆

    常用模块(详细见'egon'博客)1. 时间模块time与datetime 1. 时间戳:time.time()        应用: 用来计算时间间隔  time.sleep(5) 延迟5秒    ...

  6. BZOJ2321 [BeiJing2011集训] 星器

    2321: [BeiJing2011集训]星器 Time Limit: 1 Sec  Memory Limit: 128 MB Description Magic Land上的时间又过了若干世纪…… ...

  7. .netLinq动态Where条件

    文章介绍全网最佳方式使用EF+Linq实现多条件组合查询:代码中没有使用到网上主流自定义Expression表达式而是采用linq原生态功能编写示例直观.易懂,且有效解决自定义Expression不支 ...

  8. [Unity算法]平抛运动

    平抛运动: 1.物体以一定的初速度水平方向抛出,如果物体仅受重力作用,这样的运动叫做平抛运动. 2.平抛运动可看作水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动. 水平方向位移:s = v ...

  9. Strandbeest mechanism and Leg mechanism

    I have to say besides computer science study, I'm also interested in Leg mechanism. Share two keywor ...

  10. 8.代理ip使用

    我日常常用的两个代理: 一.风讯代理 http://www.gzkangyun.com/ 操作界面: 二.智连代理 综合感觉吧,还是智连好用一点,ip质量相对好一点,价格也便宜,不过一个ip基本上的存 ...