Webpack and toastr

Question

webpackを使用してtoastrを依存関係としてロードしてバンドルしようとしています。ここ

は全体WebPACKの設定ファイルは、バンドルがエラーなしで作成され

として

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

const DEVELOPMENT = process.env.NODE_ENV === 'development'; 
const PRODUCTION = process.env.NODE_ENV === 'production'; 

module.exports = { 
    entry: { 
     main: './wwwroot/js/mainEntry.js', 
     vendor: ['jquery', 'tether', 
      'bootstrap', 'jquery-colorbox', 
      'jquery-confirm', 'jquery-validation', 
      'jquery-validation-unobtrusive', 
      'toastr', 'jquery.nicescroll',] 
    }, 
    output: { 
     filename: '/js/[name].js', 
     path: path.resolve(__dirname, 'wwwroot'), 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: "style-loader", 
        use: "css-loader" 
       }) 
      }, 
      { 
       test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
       loader: 'file-loader?name=[name].[ext]&publicPath=/fonts/&outputPath=/fonts/' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|ico)$/, 
       loader: 'file-loader?name=[name].[ext]&publicPath=/images/&outputPath=/images/' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "vendor", 
      // (the commons chunk name) 
      filename: "/js/vendor.js", 
      // (the filename of the commons chunk) 
      minChunks: 2, 
     }), 
     new ExtractTextPlugin({ 
      filename: 'css/[name].min.css' 
     }), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }) 
    ], 
}; 

と私のエントリのjsファイルです。そして、出力バンドルを見ると、toastrスクリプトがバンドルに含まれていることがわかります。しかし、問題は、変数toastrがブラウザウィンドウで利用できないということです。

私は同様の問題を探してみましたが、何も見つかりませんでした。これは、初めてwebpackを学ぼうとしています。どんな助けもありがとうございます。

Answer 1

Webpackはインポートするモジュールを公開しません。必要な依存関係とともにコードをバンドルしますが、モジュール化されており、独自の有効範囲を持ちます。 Webpack はではすべてのファイルのソースを盲目的に結合しているだけで、すべてがグローバルになるわけではありません。あなたが投稿したエントリーファイルがファイル全体であれば、何もしません。

webpackではなく、バンドルしたJavaScriptファイルで作業を行います。言い換えれば、あなたのHTMLに含めるのはwebpackによって作成されたバンドルだけですが、バンドル内の何かにアクセスしようとするスクリプトは含まれていません。もちろん

明示的に定義することによってwindowにそれを公開することができます：toastrをインポートした後window.toastr = toastrを、しかし、グローバルスコープを汚染することは一般的に良いアイデアではありませんし、それだけで<script>タグでtoastrを含むと何ら変わりません。バンドルがライブラリとして使用されることになっている場合は、Authoring Librariesを見ることができます。しかし、あなたは通常のWebアプリケーションをやっているだけで、すべてのコードをまとめてwebpackでバンドルし、別の<script>タグに頼らないといけません。

公式ドキュメントのGetting Startedガイドをご覧ください。この例は非常に小さく（1つのDOM要素を作成します）、Webpackアプリの概念を示し、外部依存関係も使用しています。