Организация для исходного кода и демонстраций

Question

Я работаю над библиотекой JavaScript (repository here) и включает в себя как исходный код внутри каталога lib/, так и некоторые демонстрационные примеры/примеры в каталоге demos/. Как часть демоверсии, так и весь исходный код библиотеки должны пройти через Webpack, поскольку они должны проходить через Babel (потому что я использую ECMAScript 6).

Однако я не уверен, что у меня должен быть только файл конфигурации webpack как для демонстрационных версий, так и для исходного кода, потому что я не думаю, что могу сделать вывод моей библиотеки одним файлом JavaScript. Поскольку сама библиотека состоит из нескольких файлов, она имеет различные точки входа (Sprite, SpriteList и Game). Затем они помещаются в отдельные выходные файлы, и я хотел бы, чтобы они были объединены. Я знаю, что для этого могу использовать как Webpack, так и Gulp, но я не уверен, что это правильный путь.

Короче говоря, то, что я ищу, является наилучшим вариантом для организации моей конфигурации сборки (один файл веб-папки против двух файлов веб-пакета, второй из которых находится в каталоге demos/), а также webpack vs webpack + gulp.

В идеале я бы просто подстроил свой файл конфигурации и смог создать один файл для вывода моей библиотеки, используя только Webpack, но я не думаю, что это возможно.

Файл конфигурации выглядит следующим образом:

import path from 'path'; 

export default { 
    entry: { 
    Sprite: "./lib/Sprite.js", 
    SpriteList: "./lib/SpriteList.js", 
    Game: "./lib/Game.js", 

    HelicopterDemo: "./demos/helicopter_game/PlayState.js", 
    CircleExample: "./demos/circle_example/PlayState.js" 
    }, 

    output: { 
    path: __dirname, 
    filename: "./build/[name].js", 
    library: ["Pentagine", "[name]"], 
    libraryTarget: "umd" 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    }, 

    resolve: { 
    root: [ 
     path.resolve('./lib/') 
    ] 
    }, 

    externals: { 
    "underscore": "underscore" 
    } 
}; 

Answer 1

Вы можете объединить основные точки входа в один, используя один файл JS, просто перечислить все из них, например, main.js:

require('./lib/Sprite.js'); 
require('./lib/SpriteList.js); 
require('./lib/Game.js'); 

Таким образом, вы можете использовать его в качестве основной точки входа в WebPack конфигурации:

entry: { 
    Main: "./main.js", 
    HelicopterDemo: "./demos/helicopter_game/PlayState.js", 
    CircleExample: "./demos/circle_example/PlayState.js" 
}