在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文件.. ）