Webpack / Babel компилирующие скрипты

Question

Webpack / Babel компилирующие скрипты

1

Я изучаю webpack и babel, и там что-то меня смущает.

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

entry: { main: './src/index.js'},
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },

Это все имеет смысл, но что, если вы хотите, чтобы более одного js файла были скомпилированы в dist? Что, если у вас есть, например, несколько js файлов, которые импортируются и экспортируются?

Я понимаю, что многие люди будут использовать webpack с React, и поэтому просто будут использовать компиляцию в файле App.js - но это вообще такой же принцип? Например, следует ли импортировать все файлы, которые я хочу скомпилировать, в один файл js, а затем использовать wpack/babel на этом?

Надеюсь, у меня есть смысл... было бы здорово прояснить.

Большое спасибо,

Раф

Raph117 21 июль 2018, в 13:22

Источник

0

прочитайте webpack.js.org/concepts/entry-points
Shubham Agarwal Bhewanewala 21 июль 2018, в 10:36
0

Вы можете «Принять» лучший ответ, нажав на чек. см. i.stack.imgur.com/QpogP.png
Abdul Rauf 22 июль 2018, в 15:28

Теги:

javascript

webpack

babel

1 ответ

Ещё вопросы

Вы можете «Принять» лучший ответ, нажав на чек. см. i.stack.imgur.com/QpogP.png

Abdul Rauf · Accepted Answer · 2018-07-21T08-31-00.000Z

Webpack может быть настроен на использование нескольких точек входа:

entry: {
    app: "./src/scripts/app.js",
    vendor: "pathofsomeotherentrypoint"
},
output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
},

Мы можем даже генерировать несколько пучков (по одной для каждой точки входа).

entry: {
    app: "./src/scripts/app.js",
    vendor: "pathofsomeotherentrypoint"
},
output: {
    filename: "./dist/[name].bundle.js" 
},

выше config будет генерировать два app.bundle.js и vendor.bundle.js

мы можем также включать несколько файлов из каталога, используя сопоставление шаблонов glob

var glob = require("glob");
// ...
entry: glob.sync("./src/scripts/*.js"),
output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
},

Для более подробного объяснения читайте ссылки.

Рекомендации:

https://medium.com/a-beginners-guide-for-webpack-2/multiple-entries-e1b3d83579bf

https://webpack.js.org/concepts/entry-points/

qaru.site/questions/251803/...

Спасибо за это - возможно ли представить каталог в качестве точки входа? Я пойду почитать ... еще раз спасибо
@ Raph117 да, это так. Я обновил свой ответ и рекомендации