使用WebPack 2.2.0 RC3的ExtractTextPlugin会导致错误

Question

我将尝试使用WebPack 2.2.0 RC3升级一个使用WebPack 2.1.0 beta 8的AngularJS（Angular 1）应用程序，但是我在使用ExtractTextPlugin时遇到了问题。

我从以下工作设置开始：

module: {
  ...
  loaders: [{
    test: /\.(css|less)$/,
    loaders: ExtractTextPlugin.extract('style', 'css!postcss!less')
  }]
  ...
}
,
plugins: [
  new ExtractTextPlugin('styles/index-[contenthash].css')
]

我的package.json中使用的版本是：

• "css-loader": "^0.23.1"
• "less-loader": "^2.2.2"
• "postcss-loader": "^0.9.1"
• "style-loader": "^0.13.0",
• "extract-text-webpack-plugin": "^1.0.1"
• "webpack": "2.1.0-beta.8"

我的webpack配置文件中还有其他的加载器和插件，但目前我只遇到了ExtractTextPlugin的问题。在升级我的设置后，我得到了以下代码：

module: {
  ...
  rules: [{
    test: /\.(css|less)$/,
    use: ExtractTextPlugin.extract(['css', 'postcss', 'less'])
  }]
  ...
}
,
plugins: [
  new ExtractTextPlugin('styles/index-[contenthash].css')
]

这个配置使用以下版本:

• "css-loader": "^0.26.1"
• "less-loader": "^2.2.3"
• "postcss-loader": "^1.2.1"
• "style-loader": "^0.13.1"
• "extract-text-webpack-plugin": "2.0.0-beta.4"
• "webpack": "2.2.0-rc.3"

上述的配置会导致以下异常:

ERROR in ./src/index.less 模块解析失败: D:...\node_modules\extract-text-webpack-plugin\loader.js?{"omit":0,"remove":true}!style-loader!css-loader!postcss-loader!less-loader!D:...\src\index.less 意外字符 '@' (3:0) 您可能需要适当的加载器来处理此文件类型。 | /* 1. 导入供应商样式 / | | @import './index.vendor.less'; | | / 2. 导入通用样式 */ @ ./src/index.ts 24:0-23 @ multi app

ERROR in ./~/animate.css/animate.css 模块解析失败: D:...\node_modules\animate.css\animate.css 意外字符 '@' (1:0) 您可能需要适当的加载器来处理此文件类型。 | @charset "UTF-8"; | | /*!

ERROR in ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css 模块解析失败: D:...\node_modules\bootstrap-material-datetimepicker\css\bootstrap-material-datetimepicker.css 意外标记 (1:0) 您可能需要适当的加载器来处理此文件类型。 | .dtp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2000; font-size: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } | .dtp > .dtp-content { background: #fff; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); max-height: 520px; position: relative; left: 50%; } | .dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #689F38; color: #fff; text-align: center; padding: 0.3em; }

除了上述加载器配置，我还尝试了以下配置，但也没有成功:

use: ExtractTextPlugin.extract(['style-loader', 'css-loader', 'postcss-loader','less-loader'])

use: ExtractTextPlugin.extract({
       fallbackLoader: "style-loader",
       loader: "css-loader!less-loader"
})

我已经删除了我的node_modules文件夹并从头开始安装了所有内容，但这并没有帮助。

注意：删除ExractTextPlugin配置并用以下配置替换确实允许我成功构建应用程序，所以我可以说我的webpack配置已经成功迁移！

{
    test: /\.(css|less)$/,
    use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'less-loader'
    ]
}

我已经上传了一个样本以重现该问题：https://dl.dropboxusercontent.com/u/87239305/webpack-less.zip 重现步骤：

1. npm install 2. node_modules\.bin\webpack.cmd --config conf\webpack.conf.js

我还添加了第二个配置文件，它可以正常工作，没有使用ExtractTextPlugin：

1. node_modules\.bin\webpack.cmd --config conf\webpack.conf2.js

欢迎提供任何关于我所缺少的内容的指导！

先行致谢。

- Frederik Prijck

---

你能否按照自述文件的指示尝试将“extract”升级为Webpack 2语法？使用旧版本会失败。 - Juho Vepsäläinen

第一种和第三种方式不是在 https://github.com/webpack/extract-text-webpack-plugin 上描述的方式吗？ - Frederik Prijck

这是一个有点不同的内容，因为它使用了多个实例。文档甚至使用了加载器，而我需要使用规则（如果我没记错的话）。 - Frederik Prijck

你可以尝试从你的project.json版本中移除^。可能有一个新版本的css-loader正在被下载，而且无法正常工作。 - Targaryen

如果您执行重现应用程序（使用第二个配置），则可以看到CSS加载器正在工作。但我使用的版本是最新的（0.26.1），因此删除^不应该改变这一点... - Frederik Prijck

Answer 1

这似乎是与ExtractWebpackPlugin有关的问题，并且应该已经在最新版本中得到修复：https://github.com/webpack/extract-text-webpack-plugin/releases/tag/v2.0.0-beta.5。

我验证了上述提到的重现应用程序，在我的webpack.config文件中使用以下语法升级ETP到beta5时可以正常工作：

{ 
  test: /\.(css|less)$/, 
  loader: ExtractTextPlugin.extract(["css-loader", "postcss-loader", "less-loader"]) 
}

除了使用以下语法

{ 
    test: /\.(css|less)$/, 
    loader: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: ["css-loader", "postcss-loader", "less-loader"]
    }) 
},

- Frederik Prijck