Question

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

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

在我的配置中

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

在我的主js文件中。

不幸的是，它会产生错误。我该怎么办？

Answer 1

如何使用Webpack 2和ExtractTextPlugin

导出多个CSS文件/片段

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

Tomasz的回答终于让我走上正轨，但仍有一些错误：

webpack抱怨输出文件名丢失，所以我添加了一个
之后，它抱怨多个资产发送到同一个文件＆＃39;

所以，我现在的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
};

此处的关键点是从<{1}}和ExtractTextPlugin()删除文件扩展名，然后将添加到output{}，否则webpack会为每个CSS文件生成一个JS文件，即entry{}和dist/style.js。

我的dist/extra.js，这里没什么好看的：

postcss.config.js

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

package.json

帽子提示manubo here和here。

奇怪的小故障： 第一次启动{ "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" } }时，我得到通常会附加到每个内容的build.js的内容导出的CSS文件。通过修改任何SCSS文件来触发重建修复了这个问题。如果你知道，如何解决这个问题，请告诉我。

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
  ]
};

Webpack ExtractTextPlugin - 两个输出文件

2 个答案:

如何使用Webpack 2和ExtractTextPlugin