使用ExtractTextPlugin与WebPack 2.2.0 RC3引发错误

我想升级AngularJS（Angular 1）应用程序使用WebPack 2.1.0 beta 8到WebPack 2.2.0 RC3，但我遇到了ExtractTextPlugin问题。使用ExtractTextPlugin与WebPack 2.2.0 RC3引发错误

我从下面开始，工作，设置：

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

在我的package.json此使用的版本是：

“CSS加载器”：“^ 0.23.1 “
”少装载机“： ”^ 2.2.2“
”postcss装载机“： ”^ 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加载器”： “^ 0.26.1”
“少-loader “： ”^ 2.2.3“
”postcss装载机“： ”^ 1.2.1“
”式装载机“： ”^ 0.13.1“
” 提取文本，webpack-插件“：”2.0.0-beta.4“
“的WebPack”： “2.2.0-rc.3”

在以下例外上述配置的结果：

ERROR在./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 @多应用

ERROR在./~/animate.css/animate.css 模块解析失败：d： ... \ node_modules \ animate.css \ animate.css 意外字符'@'（1：0）您可能需要一个合适的加载程序来处理此文件类型。 | @charset“UTF-8”; | |/*！

ERROR在 ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css 模块解析失败：d：... \ node_modules \自举-材料的DateTimePicker \ CSS \自举的材料-datetimepicker。css 意外的令牌（1：0）您可能需要一个合适的加载程序来处理此文件类型。 | .dtp {position：fixed; top：0;左：0;正确：0;底部：0;背景：rgba（0，0，0，0.4）; z-index：2000; font-size：15px; -webkit-user-select：none; -moz-user-select：none; -ms-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;位置：相对;剩下：50％; } | .dtp> .dtp-content> .dtp-date-view> 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配置和下面确实让我succesfuly构建应用程序替换它，所以我会说我的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

我也添加为这是工作的Econd配置文件，而无需ExtractTextPlugin：

node_modules \ .bin文件\ webpack.cmd --config的conf \ webpack.conf2.js

任何指导什么，我缺少的是在这里不胜感激！

在此先感谢。

来源

2017-01-09 Frederik Prijck

你可以尝试升级按照自述文件中的说明将'extract'提取到webpack 2语法？旧的会失败。 –

这不是文档在https://github.com/webpack/extract-text-webpack-plugin上描述的第一种和第三种方式吗？ –

http://prntscr.com/dtqn4q ...（这有点不同，因为它使用多个实例寿）文档甚至使用装载机，而IIRC，我需要使用规则。 –

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

我验证了我的重现应用上述升级ETP时使用以下语法在我的webpack.config文件正在努力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"] 
    }) 
},

来源

2017-01-20 22:18:00

使用ExtractTextPlugin与WebPack 2.2.0 RC3引发错误

回答

相关问题