从 webpack 中的同一个文件创建两个不同的输出答案

【问题标题】：Create two different outputs from the same file in webpack从 webpack 中的同一个文件创建两个不同的输出
【发布时间】：2019-09-20 13:17:02
【问题描述】：

我需要更改我的 react 应用程序的构建过程，以便它为同一文件创建两个不同的输出。目前它只创建了一个index.js，它被缩小了，但我想要另一个输出，它与index.js基本相同，但被压缩了。

是否可以更改 webpack 配置以从同一 entry 获取 2 个文件（一个缩小，另一个 gzip 压缩）？

【问题讨论】：

标签： node.js reactjs webpack build react-create-app

【解决方案1】：

如果你想编辑一个使用create-react-app 构建的应用程序的Webpack 配置，你必须eject 应用程序，然后编写你自己的Webpack 配置文件。这可能非常痛苦，并且基本上无效（之一）使用create-react-app..的最大原因。

我认为在构建完成后编写一个为您执行 gzip 压缩的脚本是最简单的。

我很快就把这些放在一起来展示如何gzip 一个带有命令行参数的文件...

使用方法：node gzipper.js %SOURCE_FILE_PATH% %DEST_DIR_PATH%

例如：node gzipper.js ./build/index.js ./build
支持相对路径和绝对路径。
使用“标准库” - 不需要额外的包

const fs = require('fs');
const path = require('path');
const zlib = require('zlib');

const SOURCE = path.resolve(__dirname, process.argv[2]);
const DESTINATION = path.resolve(__dirname, process.argv[3]);

const SOURCE_STATS = fs.lstatSync(SOURCE);
const SOURCE_FILE_NAME = path.basename(SOURCE);
const DESTINATION_STATS = fs.lstatSync(DESTINATION);

if(!SOURCE_STATS.isFile() || !DESTINATION_STATS.isDirectory()) {
    throw new Error("[ERROR]::SOURCE must be a file, DESTINATION must be a directory!");
}

const SOURCE_CONTENTS = Buffer.from(fs.readFileSync(SOURCE, 'utf8'));

zlib.gzip(SOURCE_CONTENTS, (error, result) => {
    if(error) throw error;

    const OUT_PATH = `${DESTINATION}\\${SOURCE_FILE_NAME}.gz`;
    fs.writeFileSync(OUT_PATH, result);
});

您可以将一个脚本添加到您的 package.json 文件中，例如您添加到 npm build（或 yarn build）脚本中的 gzip，以便它在构建后运行..：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && npm run gzip",
    "gzip": "node gzipper.js ./build/index.js ./build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

【讨论】：