webpack - Webpack Extract Text Plugin：如何测试特定文件并提取到单独的输出？

Question

Webpack Extract Text Plugin的正常使用方式如下：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    // ...
    new ExtractTextPlugin('path/to/style.css')
  ]
}

这当然效果很好。

我面临的问题是尝试测试不同的路径模式并输出到不同的位置时。

就我而言，我正在尝试：

• 测试以“_base.scss”结尾的路径，并将它们输出到“main/base.css”
• 测试以“.scss”结尾的路径（所有 scss 文件），并将它们输出到“example/style.css”

根据我对文档的理解，以下应该有效，但事实并非如此。

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const allSCSS = new ExtractTextPlugin('example/style.css')
const baseSCSS = new ExtractTextPlugin('main/base.css')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: allSCSS.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /_base\.scss$/,
        use: baseSCSS.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
    ]
  },
  plugins: [
    // ...
    allSCSS,
    baseSCSS
  ]
}

当我运行它时，我得到的所有输出都是带有所有样式的“example/style.css”，而不是“main/base.css”。

谁能解释一下正确的方法吗？

Answer 1

请在您的 webpack 配置中进行以下更改：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
       loader: ExtractTextPlugin.extract("style-loader", "sass-loader")
      },

    ]
  },
  plugins: [
    // ...
     new ExtractTextPlugin("style.css")
  ]
}

首先安装 style-loader 和 sass-loader。而且你不需要制作不同的css文件。

已编辑请进行以下更改以生成这两个 css 文件：

const allSCSS = new ExtractTextPlugin('all.css')
const baseSCSS = new ExtractTextPlugin('base.css')

有了该配置，将生成两个单独的 CSS 文件：all.css 和 base.css。

如果它不能解决您的问题，请告诉我。