使用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引發錯誤

回答

相關問題