Webpack编译与源代码目录的一对一编译目录

是否有办法将源目录中的所有文件编译为构建目录，该目录保持相同的目录结构？
我可以在不添加新组件的情况下手动指定webpack.config.js文件的多个入口点吗？

我需要Gulp来完成吗？我已经用Grunt + Browserify成功完成了这个任务。 Grunt有一个名为expand: true的道具，它很容易为我做到这一点。Webpack编译与源代码目录的一对一编译目录

例如，我要编译的下列：

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

来源

2016-10-01 Rashad

这不会真正有意义，因为webpack将CSS和JS连接成捆绑文件。 –

这也是一个重复http://stackoverflow.com/questions/39303083/can-webpack-keep-child-modules-path-while-exporting –

在CSS的情况下，如果我设置'body {background： ''home.scss'中的红色}'和'about.scss'中的正文'{background：blue}'。如果将它们连接为一个文件，那么在这两个页面中，同一个选择器的最后一个样式将用于“家庭”和“约”网页。我如何根据当前页面分别加载它们？ – Rashad

的WebPack并不旨在是对源变换效用的源极。所以这不是微不足道的做一些事情，比如将一个文件夹中的所有sass文件编译成等效的css文件。如果这真的是你想要的，你可以只写一个npm脚本，它使用node-sass command line interface。

如果你真的需要使用webpack来做到这一点，那么你可以编程建立使用glob匹配的条目。 Webpack的配置只是javascript，你可以使用任何逻辑来构建配置对象。

“webpack的方式”是有一个入口点，并要求您从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.

来源

2016-10-01 20:55:29 lorefnon

Webpack编译与源代码目录的一对一编译目录

回答

相关问题