Создание динамически именованных выходных файлов для файлов с подстановочными знаками - PullRequest
Новая
       57

Создание динамически именованных выходных файлов для файлов с подстановочными знаками

0 голосов
/ 11 января 2019

Как сохранить структуру папок и имена файлов?

Сохранение подстановочного знака **/*.js важно. Я хочу сохранить динамику и не добавлять новые компоненты вручную.

Структура папок 

|-- src
    |-- components
        |-- lightbox
            |-- index.js
        |-- carousel
            |-- index.js
        |-- modal
            |-- index.js

Ожидаемый вывод папок и файлов:
Структура папок и оригинальные имена файлов должны быть сохранены! 

|-- build
    |-- components
        |-- lightbox
            |-- index.js
        |-- carousel
            |-- index.js
        |-- modal
            |-- index.js

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

|-- build
    |-- components
        |-- main.js

Мой конфиг вебпак 

entry: $.glob.sync('./src/components/**/*.js'),
mode: 'development',
output: {
  filename: '[name].js'
},
module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
    }
  }]
}

1 Ответ

0 голосов
/ 15 января 2019

Документы webpack утверждают, что:

Обратите внимание, что эта опция называется filename, но вам все еще разрешено использовать что-то вроде 'js / [name] /bundle.js' для создания структуры папок.

Так что, если имя выходного файла вашего веб-пакета dirA/fileA, оно будет выведено на 

|-- dist
    |-- dirA
         |-- fileA.js

Но вы также утверждаете, что

Сохранение подстановочного знака ** / *. Js важно

Мы можем воспользоваться тем, что вы можете назвать свой файл, передав объект в запись веб-пакета.

Я предполагаю, что вы используете glob узла ($.glob.sync немного смутил меня), вывод которого представляет собой массив путей, которые соответствуют шаблонам глобуса. Затем нам просто нужно изменить этот массив в объект с таким форматом: 

//from    
["./src/dirA/fileA.js", "./src/dirB/fileB.js"]
// to
{ 
  "dirA/fileA": "./src/dirA/fileA.js",
  "dirB/fileB": "./src/dirB/fileB.js",
}

Вот простой пример: 

const glob = require('glob');

const entry = glob.sync('./src/**/*.js').reduce((entry, path) => {
  const pathName = path.replace(/(\.\/src\/|\.js)/g, ''); // remove `./src/`, `.js`
  entry[pathName] = path;
  return entry;
}, {});

module.exports = {
  mode: 'development',
  entry,
  output: {
    filename: '[name].js'
  }
}
...