Webpack 从两个入口点生成两个 css 文件答案

【问题标题】：Webpack Generate two css files from two entry pointsWebpack 从两个入口点生成两个 css 文件
【发布时间】：2018-02-25 18:17:31
【问题描述】：

我需要从两个不同的 scss 入口文件生成两个 css 文件。在下面的代码中，我提到了两个入口点。第一个包含我所有的自定义 scss 文件导入，第二个包含所有自定义引导程序导入。

所以，我的要求是生成两个单独的 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('.

【问题讨论】：

标签： css webpack sass

【解决方案1】：

要生成 2 个不同的 .css 文件，您只需要 2 个入口点，以及插件部分中使用变量 [name] 的 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
  })
}

【讨论】：