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

- 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. 解决sql中上下左右backspace不能用的方法

    一. 解决输入 BACKSPACE 键变成 ^h 的问题 #su - oracle $stty erase ^h. 要永久生效,可以加入到用户环境配置文件 .bash_profile 中 , 加入如下 ...

  2. winfrom 窗体控件实现二级联动

    ComboBox绑定数据源时触发SelectedIndexChanged事件的处理办法 事件,而这个时候用户并没有选择内容,其SelectedValue也不是对应字段的值.那么时写在SelectedI ...

  3. IIS7.5和IIS8如何设置FTP的pasv端口范围

    如果不设置端口范围,在防火墙开启的情况下,连接FTP时可能出现列表错误的现象,下面介绍下如何设置FTP的pasv端口范围.. 一.首先打开IIS选择服务器会进入全局设置,再双击FTP防火墙支持 二.设 ...

  4. Solr——Windows下部署Solr7.5.0至jetty、Tomcat

    Solr6用默认的Jetty启动 需要的软件支持 JDK1.8以上 Solr6的安装包(solr-7.5.0.zip ) Solr自带一个Jetty环境,可以很方便的运行Solr. 直接到解压缩的so ...

  5. python return 返回多个值

    python return 返回多个值,实际返回的是一个tuple: #!/usr/bin/env python # -*- coding: utf-8 -*- def rt(): return 1, ...

  6. springboot打包

    springboot项目运行package命令,默认打出来的jar包只有几kb.想要打出可执行的jar包,加入插件: <build> <plugins> <plugin& ...

  7. Mac下如何用SSH连接远程Linux服务器，centos无法复制粘贴

    CentOS 7.1安装完之后默认已经启动了ssh服务我们可以通过以下命令来查看ssh服务是否启动. 3.2查看22端口是否开放 #netstat -tnl 3.3查看ssh服务是否启动 #syste ...

  8. django之前-----web应用与框架

    一web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S. 下面来看一个简 ...

  9. 虚拟机中安装CentOS7

    初始安装: 1.安装新虚拟机时,选择稍后安装操作系统,这可以自己设置语言等信息 2.修改自定义硬件:为网卡生成一个mac地址,(这里需要注意,有时网卡会冲突,导致连接时好时坏,以后可以删除掉网卡,重新 ...

  10. 6、申请发布(Distribution)证书和描述文件

    发布(Production)证书用于正式发布环境下使用,用于提交到Appstore审核发布. 申请发布(Production)证书 在“Certificates, Identifiers & ...