webpack 自动发现 entry 的配置和引用方式

时间 2019-11-08

标签 webpack 自动发现 entry 配置引用方式繁體版

原文原文链接

假定咱们的项目目录为以下的样子：javascript

- root/
    - assets/
        - app/
            - global.js
            - index/
                - index.js
            - auth/
                - login.js
                - register.js
                - ...
        - webpack.config.js
    - public/
        - assets/
            - build/

使用以下的 webpack 配置：php

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)
                );
            });
        }
    ]
};

这样，咱们就能够获得形如这样的构建输出：html

- root/
    - assets/
        - ...
    - public/
        - assets/
            - build/
                - rev-manifest.json
                - app/
                    - global.js
                - auth/
                    - login.js
                    - register.js
                    - ...

意义何在？？？java

关键在于 rev-manifest.json 文件，咱们查看一下文件内容：webpack

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

意义何在？？？web

好吧，咱们再看一下在生产环境下的构建输出：shell

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

若是配合模板中的函数：json

<!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 获得对应的构建文件的可访问路径，自动的根据不一样的环境获取到正确的引用结果。app

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

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