0

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

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

4

1 回答 1

0

如果您想编辑使用您必须对应用Webpack程序构建的应用程序的配置，然后编写您自己的配置文件。这可能会非常痛苦，并且基本上无效（之一）使用的最大原因..create-react-appejectWebpackcreate-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文件中，就像gzip您添加到npm build(or yarn build) 脚本中一样，因此它在构建之后运行..：

  "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"
  },
于 2019-09-20T14:32:55.307 回答