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中使用的版本是：

＆＃34; css-loader＆＃34;：＆＃34; ^ 0.23.1＆＃34;
＆＃34; less-loader＆＃34;：＆＃34; ^ 2.2.2＆＃34;
＆＃34; postcss-loader＆＃34;：＆＃34; ^ 0.9.1＆＃34;
＆＃34; style-loader＆＃34;：＆＃34; ^ 0.13.0＆＃34;，
＆＃34; extract-text-webpack-plugin＆＃34;：＆＃34; ^ 1.0.1＆＃34;
＆＃34; webpack＆＃34;：＆＃34; 2.1.0-beta.8＆＃34;

我的webpack配置还有一些其他的加载器和插件，但我目前只面临ExtractTextPlugin的问题。升级我的设置后，我最终得到以下代码：

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

此配置使用以下版本：

＆＃34; css-loader＆＃34;：＆＃34; ^ 0.26.1＆＃34;
＆＃34; less-loader＆＃34;：＆＃34; ^ 2.2.3＆＃34;
＆＃34; postcss-loader＆＃34;：＆＃34; ^ 1.2.1＆＃34;
＆＃34; style-loader＆＃34;：＆＃34; ^ 0.13.1＆＃34;
＆＃34; extract-text-webpack-plugin＆＃34;：＆＃34; 2.0.0-beta.4＆＃34;
＆＃34; webpack＆＃34;：＆＃34; 2.2.0-rc.3＆＃34;

以上配置导致以下例外情况：

   ./src/index.less中的错误模块解析失败：   d：\ node_modules \提取文本-的WebPack-插件\ loader.js {＆＃34;省略＆＃34; 0＆＃34;删除＆＃34;：真正}？！风格装载机CSS- ！装载机postcss装载机不太装载机d：！... \ SRC \ index.less   出乎意料的人物＆＃39; @＆＃39; （3：0）你可能需要一个合适的装载机   处理此文件类型。 | / * 1.导入供应商样式 / | | @进口   ＆＃39; ./ index.vendor.less＆＃39 ;; | | / 2.导入一般样式* / @   ./src/index.ts 24：0-23 @ multi app
      ./~/animate.css/animate.css中的错误       模块解析失败：D：... \ node_modules \ animate.css \ animate.css   出乎意料的人物＆＃39; @＆＃39; （1：0）       您可能需要适当的加载程序来处理此文件类型。       | @charset＆＃34; UTF-8＆＃34 ;;       |       | / *！

错误   ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css       模块解析失败：D：... \ node_modules \ bootstrap-material-datetimepicker \ css \ bootstrap-material-datetimepicker.css   意外的令牌（1：0）       您可能需要适当的加载程序来处理此文件类型。       | .dtp {position：fixed;顶部：0;左：0;右：0;底部：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＆gt; .dtp-content {background：#fff;最大宽度：300px; box-shadow：0 2px 5px 0 rgba（0,0,0,106），0 2px 10px 0 rgba（0,0，   0,0.12）;最大高度：520px;位置：相对;左：50％; }       | .dtp＆gt; .dtp-content＆gt; .dtp-date-view＆gt; header.dtp-header {background：＃689F38;颜色：#fff; text-align：center;填充：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 install
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。

我在beta5文件中使用以下语法将ETP升级到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"]
    }) 
},

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

1 个答案: