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

- 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. Blob下载文件 & 模拟滚动条实现

    1.vue切换路由视图时,事件钩子顺序是 当前模块create-->上一个模块beforeDestroy-->当前模块mounted 因此注册全局事件(比如给window注册事件)应放在m ...

  2. delphi2010 域名转换IP

    uses winsock; function GetHostIp_wwwdelphitopcom(HostName: string): string; type   tAddr = array[0.. ...

  3. 503 Error: need EHLO and AUTH first

    设置OUTLOOK2013使用QQ邮箱,按照QQ邮箱的配置介绍设置好后,收邮件的服务可以了,但是发送邮件的服务失败,报错:503 Error: need EHLO and AUTH first,经查, ...

  4. 使用RestTemplate在代码内调用POST请求的参数乱码问题

    背景:在项目A代码内部,调用项目B的restful接口C,我们采用了RestTemplate进行调用,但是调用过程中,一直不能正常返回数据,日志显示参数存在乱码(有个参数的值是中文) 乱码原因:请求方 ...

  5. 零基础学习python_pickle（31课）

    上次我提到了对文件的读写等一系列操作,回想下,要想从文件内读取内容无论是read还是readline,读取出来的是不是都是字符串呢?那么如果想让字典.列表这些数据类型保存进文件到读取出来都是原来的类型 ...

  6. Nginx的安装（CentOS 7环境）

    安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...

  7. 20165205 2017-2018-2 《Java程序设计》实验三 敏捷开发与XP实践

    20165205 2017-2018-2 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 检查点1: 安装alibaba 插件,解决代码中的规范问题 首先把搭档加入到自己的项目中 ...

  8. 本地计算机上的OracleDBConsoleorcl服务启动后停止

    emca -repos dropemca -repos createemca -config dbcontrol db 这三步你都运行成功了也没有报错?最后没有提示你dbcontrol已经启动了么?, ...

  9. Linux网络管理-相关笔记【自用】

    ISO/OSI七层模型应用层            APDU 应用层协议数据单元   越靠近用户表示层            PPDU 表示层协议数据单元会话层            SPDU 会话协 ...

  10. Java各个版本的新特性

    原链接:http://blog.csdn.net/shareus/article/details/50736159 1.5 1.自动装箱与拆箱: 2.枚举(常用来设计单例模式) http://www. ...