Создайте два разных вывода из одного файла в веб-пакете - PullRequest
Новая
       8

Создайте два разных вывода из одного файла в веб-пакете

0 голосов
/ 20 сентября 2019

Мне нужно изменить процесс сборки моего реагирующего приложения, чтобы оно создавало два разных вывода одного и того же файла.В настоящее время он создает только index.js, который минимизирован, но я хочу другой вывод, который в основном совпадает с index.js, но gziped.

Можно ли изменить конфигурацию webpack, чтобы получить 2 файла (один минифицированный, а другой gziped) из того же entry?

1 Ответ

0 голосов
/ 20 сентября 2019

Если вы хотите отредактировать конфигурацию Webpack приложения, созданного с помощью create-react-app, вам нужно eject приложению, а затем написать свои собственные файлы конфигурации Webpack. Это может быть чрезвычайно болезненно и по существу сводит на нет(одна из) главных причин использовать create-react-app ..

Я думаю, что было бы проще всего написать скрипт, который сделает за вас gzipping, после завершения сборки.

Iсоберите это вместе очень быстро, чтобы показать, как вы можете 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 (или 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"
  },
...