将 ExtractTextPlugin 与 WebPack 2.2.0 RC3 一起使用会引发错误答案

【问题标题】：Using ExtractTextPlugin with WebPack 2.2.0 RC3 throws errors将 ExtractTextPlugin 与 WebPack 2.2.0 RC3 一起使用会引发错误
【发布时间】：2017-05-24 03:00:21
【问题描述】：

我正在尝试将使用 WebPack 2.1.0 beta 8 的 AngularJS (Angular 1) 应用程序升级到 WebPack 2.2.0 RC3，但我遇到了 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”
“样式加载器”：“^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”
“样式加载器”：“^0.13.1”
“extract-text-webpack-plugin”：“2.0.0-beta.4”
“webpack”：“2.2.0-rc.3”

以上配置导致以下异常：

./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. 导入供应商样式/ | | @进口 './index.vendor.less'; | | / 2. 导入通用样式 */ @ ./src/index.ts 24:0-23 @多应用

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

错误 ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css 模块解析失败：D:...\node_modules\bootstrap-material-datetimepicker\css\bootstrap-material-datetimepicker.css 意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。 | .dtp { 位置：固定；顶部：0；左：0；右：0；底部：0；背景：rgba(0, 0, 0, 0.4); z 指数：2000；字体大小：15px； -webkit-用户选择：无； -moz 用户选择：无； -ms 用户选择：无；用户选择：无； } | .dtp > .dtp-content { 背景：#fff;最大宽度：300px；盒子阴影：0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);最大高度：520px；位置：相对；左：50%； } | .dtp > .dtp-content > .dtp-date-view > header.dtp-header { 背景：#689F38;颜色：#fff;文本对齐：居中；填充：0.3em； }

除了上面的loader配置外，我还尝试了下面的配置，但都不管用：

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

重现步骤：

npm 安装
node_modules\.bin\webpack.cmd --config conf\webpack.conf.js

我还添加了第二个正在运行的配置文件，没有 ExtractTextPlugin：

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

感谢我在这里缺少的任何指导！

提前致谢。

【问题讨论】：

您可以尝试按照自述文件中的说明将extract 升级到 webpack 2 语法吗？旧的会失败。
第一种和第三种方式不是文档在github.com/webpack/extract-text-webpack-plugin上描述的方式吗？
prntscr.com/dtqn4q ...（这有点不同，因为它使用多个实例）文档甚至使用加载器，而 IIRC，我需要使用规则。
您可以尝试从 project.json 版本中删除 ^。可能有更新版本的 css-loader 正在下载并且无法正常工作。
如果您执行 repro 应用程序（使用第二个配置），您可以看到 css 加载器正在工作。但是我使用的版本是最新的（0.26.1），所以删除 ^ 不应该改变...

标签： angularjs webpack extract-text-plugin

【解决方案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"]
    }) 
},

【讨论】：