Webpack ExtractTextPlugin - 两个输出文件

Question

我需要生成两个 CSS 文件。我尝试使用

new ExtractTextPlugin(['css/style.css','css/head.css'], { allChunks: true })

在我的配置中和...

require('../sass/head.scss');
require('../sass/style.scss');

在我的主JS文件中。

不幸的是，它产生了一个错误。

你该怎么办？

- Tomek Buszewski

---

文档说明：“ExtractTextPlugin会为每个条目生成一个输出文件”，因此要实现您想要的效果，您可能需要设置单独的条目，然后使用基于条目键的“[name]”模式来获取所需的文件名。 - Juho Vepsäläinen

我的示例有帮助吗？ - Tomasz Racia

Answer 1

如何使用Webpack 2和ExtractTextPlugin导出多个CSS文件/片段

基本上，我想做的就是复制标准的Compass行为（为每个不是部分的SCSS文件生成一个单独的CSS文件），并添加PostCSS/Autoprefixer。

Tomasz的答案最终让我找到了正确的方向，但仍然存在一些错误：

1. webpack抱怨缺少输出文件名，所以我添加了一个
2. 之后，它抱怨“多个资源发射到同一个文件”

---

所以这是我的当前webpack.config.js，它将自动添加前缀并生成两个单独的CSS文件：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

// var ExtractCSS = new ExtractTextPlugin('dist/[name].css');
var ExtractCSS = new ExtractTextPlugin('dist/[name]');

module.exports = {
    entry: {
        // style: './src/style.scss',
        // extra: './src/extra.scss'
        'style.css': './src/style.scss',
        'extra.css': './src/extra.scss'
    },
    output: {
        // filename: './dist/[name].js'
        filename: './dist/[name]'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        "postcss-loader",
                        "sass-loader"
                    ]
                })
            }
        ]
    },
    plugins: [
        ExtractCSS
    ],
    watch: true
};

关键点在于从ExtractTextPlugin()和output{}中移除文件扩展名，然后将其添加到entry{}中，否则webpack会为每个CSS文件生成一个JS文件，即dist/style.js和dist/extra.js。

---

我的postcss.config.js，这里没有什么花哨的东西：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

---

最后是 package.json 文件：

{
    "dependencies": {
    },
    "devDependencies": {
        "css-loader": "^0.26.1",
        "extract-text-webpack-plugin": "^2.0.0-rc.3",
        "node-sass": "^4.5.0",
        "postcss-loader": "^1.3.0",
        "sass-loader": "^6.0.0",
        "style-loader": "^0.13.1",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.3.0"
    }
}

---

向manubo致敬和这里。

---

奇怪的故障：当第一次启动$ webpack时，我得到了通常会被附加到每个导出的CSS文件中的build.js内容。通过修改任何SCSS文件来触发重建可以解决此问题。如果您知道如何解决，请告诉我。

- robro

Answer 2

你需要两个入口点来实现这个功能:

var styleScss = new ExtractTextPlugin('css/[name].css');

module.exports = {
  entry: {
    style: 'sass/style.scss',
    head: 'sass/head.scss'
  },

  module: {
      {
        test: /\.scss$/,
        loader: styleScss.extract(
          'style-loader',
          'css!sass'
        )
      }
    ]
  },

  plugins: [
    styleScss
  ]
};

- Tomasz Racia