3

WebPack 2.1.0 ベータ 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"
  • "style-loader": "^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"
  • "style-loader": "^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-user-select: なし; -moz-user-select: なし; -ms-user-select: なし; ユーザー選択: なし; } | .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 なしで機能する 2 つ目の構成ファイルも追加しました。

  • 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。

ファイル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"]
    }) 
},
于 2017-01-20T22:18:00.687 に答える