Webpack從兩個入口點生成兩個CSS文件

Question

我需要從兩個不同的scss入口文件生成兩個css文件。 在下面的代碼中，我提到了兩個入口點。第一個入口包含我所有的自定義scss文件導入，第二個入口包含所有自定義的bootstrap導入。

因此，我的要求是生成兩個獨立的CSS文件，例如... app.css和bootstrap.css

entry: ["./styles/app.scss", './styles/custom-bootstrap.scss'],
rules: {
  test: /\.(sass|scss)$/,
  use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
  include: PATHS.app
},
plugin: {
  new webpack.EnvironmentPlugin(['NODE_ENV']),
  new webpack.DefinePlugin(compileTimeConstantForMinification),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),
  new ExtractTextPlugin('./styles/app.css'),
  new ExtractTextPlugin('.

Answer 1

要生成2個不同的.css文件，您只需在插件部分中使用變量[name] 2個入口點和1個ExtractTextPlugin實例：

entry: {
  app: './styles/app.scss',
  bootstrap: './styles/custom-bootstrap.scss'
},
rules: {
  test: /.(sass|scss)$/,
  use: ExtractTextPlugin.extract({
    use: ['css-loader', 'sass-loader']
  }),
  include: PATHS.app
},
plugin: {
  new ExtractTextPlugin({
    filename: '[name].css' //generates "app.css" and "bootstrap.css" files
  })
}