在 WebPack 2.2.0 RC3 中使用 ExtractTextPlugin 会抛出错误

Question

我正在尝试将使用 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"
"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 Module parse failed: 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 Unexpected character '@' (3:0) You may need an appropriate loader to handle this file type. | /* 1. Import vendor styles / | | @import './index.vendor.less'; | | / 2. Import general styles */ @ ./src/index.ts 24:0-23 @ multi app

ERROR in ./~/animate.css/animate.css Module parse failed: D:...\node_modules\animate.css\animate.css Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @charset "UTF-8"; | | /*!

ERROR in ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css Module parse failed: D:...\node_modules\bootstrap-material-datetimepicker\css\bootstrap-material-datetimepicker.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .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

重现步骤：

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

我还添加了第二个没有 ExtractTextPlugin 的配置文件：

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

感谢任何关于我在这里遗漏的指导！

提前致谢。

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"]
    }) 
},

在 WebPack 2.2.0 RC3 中使用 ExtractTextPlugin 会抛出错误

Using ExtractTextPlugin with WebPack 2.2.0 RC3 throws errors

angularjs

webpack

extract-text-plugin