Webpack ExtractTextPlugin - 两个输出文件

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的答案终于让我走上正轨,仍有一些错误:

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文件来触发重建修复了这个问题.如果您知道,如何解决这个问题,请告诉我.

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