Webpack компиляции один к одному построить каталог с исходным каталогом

  1. Есть ли способ скомпилировать все файлы в исходном каталоге в a
    построить каталог, который поддерживает ту же структуру каталогов?
  2. Можно ли сделать все это без указания вручную нескольких точек входа в webpack.config.jsфайл при каждом добавлении нового компонента?

Нужен ли мне глоток, чтобы достичь этого? Я успешно сделал это с Grunt + Browserify. У Grunt есть опора под названиемexpand: true, которая делает это для меня легко.

Например, я хочу скомпилировать следующее:

src
 |-- app
     |-- index.html
     |-- index.jsx
     |-- routes.jsx
     |-- components
             |-- Home
                  |-- home.jsx
                  |-- home.scss
             |-- About
                  |-- about.jsx
                  |-- about.scss
     |-- common
             |-- Dropdown
                  |-- dropdown.jsx
                  |-- dropdown.scss

к:

build
 |-- app
     |-- index.html
     |-- index.js
     |-- routes.js
     |-- components
             |-- Home
                  |-- home.js
                  |-- home.css
             |-- About
                  |-- about.js
                  |-- about.css
     |-- common
             |-- Dropdown
                  |-- dropdown.js
                  |-- dropdown.css

1 ответ

  1. Webpack не предназначен для использования в качестве утилиты преобразования «источник в источник». Таким образом, это не тривиально сделать что-то вроде компиляции всех файлов sass в папке для эквивалентных файлов css. Если это действительно то, что вы хотите, вы можете просто написать сценарий npm, который делает это с помощью интерфейса командной строки node-sass .

    Если вам действительно нужно использовать webpack для этого, то вы можете программно построить записи, используя сопоставление glob. Конфигурация Webpack — это просто javascript, вы можете использовать любую логику для создания объекта конфигурации.

    «Путь webpack» должен иметь точку входа и требовать то, что вам нужно от файлов javascript.

    Теперь, чтобы решить вашу конкретную проблему о переопределении правил css, style-loaderпредоставляет вам возможность избавиться от введенных таблиц стилей через API подсчета ссылок .

    var style = require("style/useable!css!./home.css");
    style.use(); 
    style.unuse(); // when you navigate away from the page.