Question

有没有办法将源目录中的所有文件编译为构建维护相同目录结构的目录吗？
每次添加新组件时，如果不手动指定webpack.config.js文件的多个入口点，我可以执行上述操作吗？

我需要Gulp来完成这项工作吗？我已经使用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

Answer 1

Webpack不是源转换实用程序的源。因此，将文件夹中的所有sass文件编译为等效的css文件并不是一件容易的事。如果这真的是你想要的，你可以编写一个使用node-sass command line interface来执行该操作的npm脚本。

如果您确实需要使用webpack来执行此操作，那么您可以使用glob匹配以编程方式构建条目。 Webpack配置只是javascript，您可以使用任何逻辑来构建配置对象。

＆＃34; webpack方式＆＃34;是有一个入口点，需要从javascript文件中得到你需要的东西。

现在，为了解决您对被覆盖的css规则的特定关注，style-loader使您能够通过reference counted api处理注入的样式表。

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

Webpack使用源目录编译一对一构建目录

1 个答案: