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編譯與源代碼目錄的一對一編譯目錄

回答

相關問題