webpackでjQueryプラグインをインポートする

Question

私は、角度や反応について最も多くの記事を検索して見つけました。私のプロジェクトにはどちらも含まれていません。

webpackを使用して古いjqueryモジュールをjsファイルにインポートしようとしています。

私はjqueryのは、このメソッドを使用して含まれている：

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
] 

これは動作します。私は必要なファイルでjqueryにアクセスできます。しかし

私がしようとすると、たとえば、スクリプトをインポートします。

import coverflow from '../vendor/coverflow/dist/coverflow'; 

ソース： https://github.com/coverflowjs/coverflow

私はこれを見ると、私がいることがわかり

Cannot read property 'createElement' of undefined 

ブラウザのエラーを取得します'undefined'はドキュメントを参照しています。ドキュメントはどのように定義されていませんか？なぜこのインポートは機能しません。方法使用

：

rules: [ 
    { 
     test: require.resolve('./js/vendor/coverflow/dist/coverflow.js'), 
     use: "imports-loader?this=>window" 
    } 
], 

を私はこのエラーを取得する：

[0] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. 
 
[0] - configuration has an unknown property 'rules'. These properties are valid: 
 
[0] object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node 
 
?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, 
 
target?, watch?, watchOptions? } 
 
[0] For typos: please correct them. 
 
[0] For loader options: webpack 2 no longer allows custom properties in configuration. 
 
[0]  Loaders should be updated to allow passing options via loader options in module.rules. 
 
[0]  Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: 
 
[0]  plugins: [ 
 
[0]  new webpack.LoaderOptionsPlugin({ 
 
[0]   // test: /\.xxx$/, // may apply this only for some modules 
 
[0]   options: { 
 
[0]   rules: ... 
 
[0]   } 
 
[0]  }) 
 
[0]  ]

Answer 1

それはおそらくあなたが期待するに窓に設定するこのを使用しているライブラリの、しかし、そうではありません。私はmodernizrで、この同じ問題を抱えていたし、このようなimports-loaderでそれを解決：

module: { 
    rules: [ 
    { 
    test: require.resolve('modernizr'), 
    use: [ 
     'expose-loader?Modernizr', 
     'imports-loader?this=>window!exports-loader?window.Modernizr' 
    ] 
    } 
} 

重要な部分は、この=>ウィンドウです。あなたはread more details about how I solved it hereです。