3

我正在尝试将使用 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”，
  • “提取文本 webpack 插件”：“^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. 导入供应商样式/ | | @import './index.vendor.less'; | | / 2. 导入通用样式 */ @ ./src/index.ts 24:0-23 @multi app

./~/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；}

除了上面的加载器配置，我还尝试了下面的配置，但都没有成功：

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

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

提前致谢。

4

1 回答 1

0

这似乎是 ExtractWebpackPlugin 的一个问题，应该已通过最新版本修复：https ://github.com/webpack/extract-text-webpack-plugin/releases/tag/v2.0.0-beta.5 。

在将 ETP 升级为beta5在我的文件中使用以下语法时，我验证了上面提到的重现应用程序正在运行webpack.config：

{ 
  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"]
    }) 
},
于 2017-01-20T22:18:00.687 回答