在Webpack中，如何使用單個條目main.js獲得多個輸出（文件內部具有多個css文件）？

Question

我的目錄結構應該是這樣的。

|-src/ 
| |-styles/ (less) 
| | |-xx.less(input inside main.js) 
| | |-yy.less(input inside main.js) 
| | |-zz.less(input inside main.js) 
| 
|-dist/ 
    |-assets/ 
    | |-xx.css(output should be like this) 
    | |-yy.css(output should be like this) 
    | |-zz.css(output should be like this) 

和我main.js文件包含，

require('./styles/xx.less'); 
require('./styles/yy.less'); 
require('./styles/zz.less'); 

，我的切入點是

entry: { 
    app: './main.js' 
    }, 

1.我怎樣才能得到儘可能塊（xx.css，YY輸出。 CSS，zz.css）？ 2.試過了extractTextPlugin那裏我能夠以app.css的名義得到輸出，但不是我想要的。 我可以嘗試在main.js文件中輸入相同名稱和數量的輸入的哪個插件？

Answer 1

你可以將你的CSS需求分成文件和入口點。 例如：

xx.less.js

require('./styles/xx.less'); 

和的WebPack條目：

app: [path.join(__dirname, 'path/to/xx.less.js')] 

和呼叫的WebPack多次使用節點腳本或東西

更多詳細解答：

webpack配置中的每個條目都代表將要創建的綁定文件，將根據該js文件中css的引用創建起始點js文件的入口點以及每個css文件。

所以，如果你想要幾個CSS文件，你需要在你的webpack配置幾個條目和條目中的每個js將需要較少的文件，並以這種方式，你會得到3 js文件和3 css文件，所以你的配置應該看起來像這樣：

{ 
     entry: { 
      xx: [ path.resolve(__dirname, 'path/to/js/xx.js')], 
      yy: [ path.resolve(__dirname, 'path/to/js/yy.js')], 
      zz: [ path.resolve(__dirname, 'path/to/js/zz.js')] 
     }, 

     output: { 
      path: path.resolve(__dirname, 'dist/assets'), 
      filename: '[name].js' //the placeholder name will be replace by the entry name (xx,yy,zz) 
     } 

     ... 

     plugins: [ 
      new ExtractTextPlugin({ 
       filename: '[name].css' //this is the name of the css according to the entry in the js file 
      }) 
} 

你少裝載機應保持不變，只是點到src /風格，所有的減檔都和JavaScript文件（xx.js，yy.js，zz.js）你應該要求相應的較少文件

您在xx.js中調用xx.less：require('./styles/xx.less');

在yy.js你叫yy.less：require('./styles/yy.less');

在zz.js你叫zz.less：require('./styles/zz.less');

，並在運行的WebPack他將在3個CSS文件（和3個js文件.. ）