問題タブ [webpack-2]

webpack 1.x では、webpack 構成で eslint プロパティを使用して、以下を使用してリンティング エラーの自動修正を有効にすることができました。

ただし、webpack 2.x では、webpack 構成のどこに設定すればよいかわからないため、これまでのところ自動修正機能を使用できませんでした。webpack configFile で eslint プロパティを使用すると、WebpackOptionsValidationError.

コード分​​割を構成しようとしています

• 角度1.5
• タイプスクリプト 2.x
• ウェブパック2

基本的なセットアップ: vscode typescript コンパイラを使用して、ソース フォルダーと同じフォルダー構造を持つ出力フォルダーに ts ファイルをコンパイルします。

webpack のエントリ ポイントは testapp\testapp.js で、これには以下が含まれます

現時点では、pageonecomp.ts も pagetwocomp.ts も myservice.ts から何も使用しません。コンパイルして webpack 2 を実行すると、次のように表示されます。

0.bundle.js には MyService が含まれ、testapp.bundle.js には pageonecomp、pagetwocomp、および testapp 角度モジュールが含まれています。

しかし今、pageonecomp.ts 内の myservice.ts からエクスポートされた MyService タイプを使用したいと考えています。typescript が MyService クラスでコード補完を提供できるようにするには、 pageonecomp.ts に MyService タイプをインポートする必要があります。

しかし、ここで webpack を実行すると、出力からわかるようにコード分割が機能しなくなります。

MyService クラスが testapp バンドルに含まれるようになりましたが、これは望ましくありません...

これを機能させる方法を知っている人はいますか？目標は、webpack が import ステートメントのみに基づいてバンドルを作成し、バンドルに何を入れるかを決定し、System.import でコード分割が発生する場所を指定することです。

注：現時点では、追加のAngularモジュールの動的ロードは必要ありません。複数のエントリポイント（複数の小さなスパ）のバンドルと、それらのスパ間で共有されるいくつかの一般的なバンドルを作成しようとしています.

sass-loader を使用して Foundation を Webpack 2 で使用しようとしています。

Foundationをインポートしています

また、基盤が見つからないため、インポート エラーが発生します。sass-loader のドキュメントを読むと、実際に使用する必要があることが示唆されます。

インポートエラーは修正されますが、新しい問題が発生します。

私が受け取るエラーは

モジュールビルドの ModuleBuildError が失敗しました: @import "normalize"; ^ インポートするファイルが見つからないか読み取り不能: 正規化

インポートするファイルが見つからないか読み取り不能: 正規化親スタイル シート: ... /node_modules/foundation-sites/scss/foundation.scss in ... /node_modules/foundation-sites/scss/foundation.scss (行 9、列 1 )

私の webpack 構成ファイルでは、以下のように ExtractTextPlugin も使用しています。

これは、何らかの理由で webpack が node_modules フォルダーに解決されていないことが原因であると考えていますが、原因がどこにあるのかは不明です。

これを使用してwebpack.config.js：

この構造を持つ：

そしてこれindex.js：

そしてCourses.jsx：

そしてCourseList.jsx：

を実行するwebpackと、次のエラーが発生します。

.jsxファイル拡張子の名前を変更すると、機能し.jsます。