Webpack: Как мне объединить несколько файлов javascript в один выходной файл?

Question

Предположим, у меня есть два файла, main.js и app.js; Как я могу использовать Webpack для объединения их обоих в один файл: bundle.js?

Answer 1

Создай entry.js который является вашим входным файлом веб-пакета и в этом ваш require ваши дополнительные файлы

webpack.config.js

module.exports = {
   entry: './src/entry.js'
   ...
};

/src/entry.js

require('./main.js');
require('./app.js');

если эти два файла зависят друг от друга, было бы полезно отразить это в вашем дереве зависимостей и потребовать main.js в вашем app.js и не в entry.js например

Answer 2

Вы можете передать массив записей:

module.exports = {
   entry: ['./main.js', './app.js'],
   ...
};

Кроме того, вы можете передать их как параметр CLI:

webpack ./main.js ./app.js --config=webpack.config.js

Answer 3

Поскольку ваш вопрос касается веб-пакета, я предполагаю, что вы уже установили веб-пакет
(например, с помощью пряжи:yarn add --dev webpack webpack-cli).

Теперь у вас есть разные варианты:

Укажите все входные файлы внутри

Вы можете указать все нужные файлы внутри, например:

      const path = require('path');
module.exports = {
    entry: [
        "./script1.js",
        "./script2.js"
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    // optimization: { minimize: false },
};

Затем запустите веб-пакет, например:

Укажите все входные файлы в дополнительном входном файле

Затем вы можете импортировать все свои файлы в один «входной» файл (например,entry.jsилиindex.js), например:

      // entry.js: entry file for webpack
require('./script1.js');
require('./script2.js');

А затем обратитесь к этому файлу внутри:

      const path = require('path');
module.exports = {
    entry: ['./entry.js'],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    // optimization: { minimize: false },
};

Затем запустите веб-пакет с:

      yarn webpack --config webpack.config.js

Динамическое создание массива входных файлов

Свойство entry позволяет функции динамически определять записи .

Например, упрощенно:

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

const sourceFolder = './src';

const createEntryFilesArray = function(){
    return new Promise(function( resolve, reject ){
        fs.readdir( sourceFolder, (err, files) => {
            if( !err ){
                resolve(
                    files
                        .filter( file => file.endsWith('.js') )
                        .map( file => [ sourceFolder, file ].join('/') )
                );
            } else {
                reject();
            }
        })
    })
};

module.exports = {
    entry: createEntryFilesArray,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Но вы, вероятно, захотите использовать более надежные шаблоны (в зависимости от структуры вашей папки), например, включая использование glob.

Кроме того, обратите внимание, что файлwebpack.config.jsэто просто файл Javascript, поэтому вы можете делать все, что хотите, для динамического создания массива файлов записей.

Например, упрощенно:

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

const sourceFolder = './src';
const entryFilesArray = fs.readdirSync( sourceFolder )
    .filter( file => file.endsWith('.js') )
    .map( file => [ sourceFolder, file ].join('/') );

module.exports = {
    entry: entryFilesArray,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Альтернатива: использование компилятора TypeScript

В качестве альтернативы, если вы специально не хотите использовать веб-пакет, вы также можете использовать компилятор TypeScript, например, если вы просто хотите связать несколько и/или.tsфайлы в один файл, особенно если вы все равно используете TypeScript.

Таким образом, вам не нужно будет устанавливать Webpack. Но обратите внимание, что это не экономит место, если вам все равно не нужно устанавливать Typescript. Размеры пакетов ara (в настоящее время на моей машине):

• typescript: 124 файла, 67 МБ
• webpack,webpack-cli: 3347 файлов, 21 МБ

Объединение файлов с помощью компилятора TypeScript:

Установите TypeScript, например:

      yarn add --dev typescript

Добавитьtsconfig.jsonфайл, например:

      {
    "files": [
        "./script1.js",
        "./script2.js"
    ],
    "compilerOptions": {
        "target": "es2018",                           /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
        "allowJs": true,                              /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
        "outFile": "./dist/bundle.js",                /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
        "outDir": "./dist",                           /* Specify an output folder for all emitted files. */
//        "removeComments": false,                      /* Disable emitting comments. */
//        "esModuleInterop": true,                      /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
//        "forceConsistentCasingInFileNames": true,     /* Ensure that casing is correct in imports. */
        "strict": true,                               /* Enable all strict type-checking options. */
    }
}

Целевая папка (например,dist) должен существовать, он не будет создан автоматически.

Запустите компилятор TypeScript с помощью:

      yarn run tsc --project tsconfig.json

Использование плагинов

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

Answer 4

Вы можете использовать webpack-concat-plugin.

https://www.npmjs.com/package/webpack-concat-plugin