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

- 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. 结合源码分析 bubble 使用注意事项

    使用dubbo时候要尽量了解源码,不然会很容易入坑. 一.服务消费端ReferenceConfig需要自行缓存 ReferenceConfig实例是个很重的实例,每个ReferenceConfig实例 ...

  2. UE4 几个好用的插件和Wiki教程

    转自:http://blog.csdn.net/u014532636/article/details/72729881 https://github.com/ue4plugins/LoadingScr ...

  3. jQuery+html+css-自己写的分页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 使用dtc把dtb的反编译为dts

    sudo apt-get install device-tree-compiler dtc -I dtb -O dts msm8976-v1.1-qrd.dtb > msm8976-v1.1-q ...

  5. NT平台ADSL拨号连接密码恢复原理

    NT平台拨号连接密码恢复原理 创建时间:2004-11-08 更新时间:2004-11-12文章属性:原创文章提交:eyas (eyas_at_xfocus.org)NT平台拨号连接密码恢复原理Aut ...

  6. delphi正则表达式学习笔记（一）

    在 Delphi 中是没有自带的正则表达式库的,在网上能找到的用于 Delphi 的正则表达式类大体上有两个,分别是 PerlRegEx 和 RegExpr. 前者相当强大,但发布程序时需要带上他的一 ...

  7. Java - 18 Java Scanner 类

    java.util.Scanner是Java5的新特征,我们可以通过 Scanner 类来获取用户的输入. 下面是创建 Scanner 对象的基本语法: Scanner s = new Scanner ...

  8. Ren'Py视觉小说安装，玩一下吧，上班很闲的话

    ---------------------------------------------------------------------------------------------------- ...

  9. git error: failed to push some refs to...

    在git环境下push代码时,报错如下: 用gitk查看提交的信息,发现没有生产changeID,主要原因是clone项目时没有把hook克隆下来,解决办法:将项目clone地址的&& ...

  10. mysql千万级数据库插入速度和读取速度的调整记录

    一般情况下mysql上百万数据读取和插入更新是没什么问题了,但到了上千万级就会出现很慢,下面我们来看mysql千万级数据库插入速度和读取速度的调整记录吧. 1)提高数据库插入性能中心思想:尽量将数据一 ...