Angualr 2 + Typescript + jQuery + webpack：$定義されていません

Question

タイトルでは、typescript、jquery、webpack（dist jsおよびcssファイル）を使用してAngular 2アプリケーションを開発しています。

コントローラから、私はjqueryの（$）にアクセスする必要があるとき、私はいつものようにそれをインポートする必要があります：jQueryの機能を必要とする各コントローラの上部に

var $: JQueryStatic = require('jquery'); 

。

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const merge = require('webpack-merge'); 

module.exports = (env) => { 
    const extractCSS = new ExtractTextPlugin('vendor.css'); 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     resolve: { extensions: ['.js'] }, 
     module: { 
      rules: [ 
       { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }, 
       { test: /jquery-mousewheel/, loader: "imports-loader?define=>false&this=>window" }, 
       { test: /malihu-custom-scrollbar-plugin/, loader: "imports-loader?define=>false&this=>window" } 
      ] 
     }, 
     entry: { 
      vendor: [ 
       '@angular/common', 
       '@angular/compiler', 
       '@angular/core', 
       '@angular/flex-layout', 
       '@angular/http', 
       '@angular/material', 
       '@angular/platform-browser', 
       '@angular/platform-browser-dynamic', 
       '@angular/router', 
       '@angular/platform-server', 
       'angular2-universal', 
       'angular2-universal-polyfills', 
       'bootstrap', 
       //'bootstrap/dist/css/bootstrap.css', 
       'es6-shim', 
       'es6-promise', 
       'font-awesome/css/font-awesome.css', 
       'event-source-polyfill', 
       'hammerjs', 
       'jquery', 
       'jquery-mousewheel', 
       'malihu-custom-scrollbar-plugin', 
       'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css', 
       'swiper', 
       'swiper/dist/css/swiper.css', 
       'zone.js', 
      ] 
     }, 
     output: { 
      publicPath: '/dist/',  // Specifies the public URL address of the output files when referenced in a browser 
      filename: '[name].js',  // Specifies the name of each output file on disk 
      library: '[name]_[hash]' // Export the bundle as library with that name 
     }, 
     plugins: [ 
      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery', Hammer: "hammerjs/hammer" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
      new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 
      new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 
     ] 
    }; 

    const clientBundleConfig = merge(sharedConfig, { 
     output: { path: path.join(__dirname, 'wwwroot', 'dist') }, 
     module: { 
      rules: [ 
       { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) } 
      ] 
     }, 
     plugins: [ 
      extractCSS, 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ].concat(isDevBuild ? [] : [ 
      new webpack.optimize.UglifyJsPlugin() 
     ]) 
    }); 

    const serverBundleConfig = merge(sharedConfig, { 
     target: 'node', 
     resolve: { mainFields: ['main'] }, 
     output: { 
      path: path.join(__dirname, 'ClientApp', 'dist'), 
      libraryTarget: 'commonjs2', 
     }, 
     module: { 
      rules: [{ test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] }] 
     }, 
     entry: { vendor: ['aspnet-prerendering'] }, 
     plugins: [ 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ] 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
} 

その宣言を毎回行う必要がないようにする方法はあります。詳細は

は、ここに私のwebpack.configファイルのですか？事前

Answer 1

で

おかげであなたはこの方法であなたのwebpack.config.jsでプラグインを更新する場合は、[はい、あなたは、これを行うことができます：

：

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

が必要な依存関係をインストールする前に、忘れてはいけません

npm install jquery --save 
npm install @types/jquery --save-dev