angularjs - 将 ExtractTextPlugin 与 WebPack 2.2.0 RC3 一起使用会引发错误

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”
• "样式加载器": "^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”

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

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