Webpack 在特定位置将scss文件编译为css文件

我有以下文件夹结构：

|- webpack.config.js
|- src/
  |- main.js
  |- some.other.js.files
|- styles/
  |- app.scss
  |- animation.scss
  |- transition.scss
|- public/
  |- js/
    |- app.js

我已经配置了Webpack，这样它可以获取所有css和js文件，并将它们编译为

public/js

下的

app.js

。以下是配置：

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.to.public.js,
    filename: 'app.js'
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
  }
}

现在我想创建另一个名为

static.scss

的scss文件，而不是像其他文件一样将其添加到app.js中，我想将其编译成

public/css

下的独立css文件。这样我就可以从存储库中其他地方的一些html文件链接到它

---

如何做到这一点？

您可以使用extract Text WebPack插件提取特定的目标css：