Webpack для back-end?

Мне просто интересно, я начал использовать Webpack для нового проекта, и пока он работает нормально. Я почти сказал, что мне нравится это лучше, чем Grunt, который я использовал раньше. Но теперь я совершенно смущен, как и я должен использовать его с моим back-end Express?

Смотрите, я создаю одно приложение с интерфейсом (ReactJS) и back-end (ExpressJS). Приложение будет опубликовано на Heroku. Теперь мне кажется, что я должен использовать Webpack с ExpressJS, чтобы запустить приложение и запустить его с помощью одной команды (front-end и back-end).

Но парень, который написал этот blogpost http://jlongster.com/Backend-Apps-with-Webpack--Part-I, похоже, использует Webpack для объединения всех js файлов back-end, которые находятся в моем мнение действительно не нужно. Почему я должен связывать мои внутренние файлы? Я думаю, что просто хочу запустить back-end, посмотреть мои исходные файлы для изменений и использовать остальную часть мощности Webpack только для интерфейсного.

Как вы, ребята, связали интерфейс, но в то же время запустите часть backdn nodejs? Или есть ли веская причина для связывания файлов с Webpack?

ОТВЕТЫ

Ответ 1

Зачем использовать webpack для node backend

Если мы говорим о реагировать и node, вы можете построить isomorphic response app. И если вы используете import модули ES6 в приложении-клиенте на стороне клиента, все в порядке - они связаны с веб-пакетом на стороне клиента.

Но проблема на сервере, когда вы используете одни и те же модули реагирования, поскольку node не поддерживает модули ES6. Вы можете использовать require('babel/register'); на стороне сервера node, но код трансипиля во время выполнения - он неэффективен. Наиболее распространенным способом решения этой проблемы является пакет backend с помощью webpack (вам не нужно, чтобы весь код транслировался с помощью webpack - только проблемный, например, реагировать на вещи в этом примере).

То же самое происходит с JSX.

Объединение интерфейса и бэкэнд одновременно

Конфигурация вашего webpack может иметь конфигурации в массиве: один для интерфейса и второй для бэкэнд:

webpack.config.js

const common = {
    module: {
        loaders: [ /* common loaders */ ]
    },
    plugins: [ /* common plugins */ ],
    resolve: {
        extensions: ['', '.js', '.jsx'] // common extensions
    }
    // other plugins, postcss config etc. common for frontend and backend
};

const frontend = {
     entry: [
         'frontend.js'
     ],
     output: {
        filename: 'frontend-output.js'
     }
     // other loaders, plugins etc. specific for frontend
};

const backend = {
     entry: [
         'backend.js'
     ],
     output: {
        filename: 'backend-output.js'
     },
     target: 'node',
     externals: // specify for example node_modules to be not bundled
     // other loaders, plugins etc. specific for backend
};

module.exports = [
    Object.assign({} , common, frontend),
    Object.assign({} , common, backend)
];

Если вы запустите эту конфигурацию с помощью webpack --watch, она будет параллельно создавать ваши два файла. Когда вы редактируете специальный код интерфейса, только frontend-output.js будет сгенерирован, то же самое для backend-output.js. Лучше всего, когда вы редактируете изоморфную часть реакции - webpack будет создавать оба файла одновременно.

Вы можете найти в этом учебник объяснение, когда использовать webpack для node (в главе 4).