ウェブパックのロードを使用して、文字の形をインポートする

Question

こんにちは、インターネット上の人々！今日私はあなたに別の問題を提示しています！

私は、typescriptコードをコンパイルするためにts-loaderでwebpackを使用しています。私はこのような角度インポートするよしかしとき：

[18:11:21] Starting 'build'... 
ts-loader: Using typescript@2.0.6 and C:\testProject\tsconfig.json 
[18:11:24] [webpack] Hash: 155db0dc394ae32ae9e6 
Version: webpack 1.13.2 
Time: 2845ms 
Asset  Size Chunks    Chunk Names 
app.js 3.11 MB  0 [emitted] main 
chunk {0} app.js (main) 1.19 MB [rendered] 
    [0] ./app/app.module.ts 2.26 kB {0} [built] 
    [1] ./~/angular/index.js 48 bytes {0} [built] 
    [2] ./~/angular/angular.js 1.19 MB {0} [built] 

• index.js：

  import * as angular from "angular"; 
  angular.module("app", []); 
  

  それは実際に2スクリプトをインポートしている以下に示すような角度ライブラリのコード

• angular.jsのエントリポイント：角度ライブラリ

これは簡単ですまた、index.jsは角度ライブラリをロードします。その結果、角度ライブラリがロードされます。2度。ここで

は私webpack.config.js次のとおりです。

entry: "./app/app.module.ts", 

output: { 
    publicPath: "/lib/", 
    path: path.join(__dirname,"lib"), 
    filename: "app.js" 
}, 

// source map 
devtool: "#inline-source-map", 

module: { 
    loaders: [ 
    { 
     test: /\.ts$/, 
     // Exclude node modules 
     exclude: [/node_modules/], 
     loader: 'ts-loader' 
    }, 
    { 
     test: /\.html$/, 
     // Exclude node modules 
     exclude: [/node_modules/], 
     loader: 'raw-loader' 
    } 
    ] 
} 

Answer 1

私はあなたのWebPACKがどのように機能するかを誤って理解してだと思います。すべてのモジュールは、必要な回数にかかわらず一度実行されます。あなたが行う場合例：

var angular = require('angular'); 
var anotherAngular = require('angular'); 

angularスクリプトは、実際に1回実行され、結果はrequireへのすべての後続の呼び出しのために、「キャッシュされました」。

あなたの場合、あなたが見ているものは完全に正常です。

require('./angular'); 
module.exports = angular; 

それはちょうど再輸出別のスクリプト最小限index.jsを持つようにNPMパッケージに共通です：あなたはNPMパッケージからの角度をロードすると、NPMパッケージがどのように見えるindex.jsを使用しています。 webpackをロードするときに、webpackはindex.jsをロードし、次にangular.jsをロードして結果を返します。これはあなたに問題を起こすべきではなく、実際に何も2回ロードされることはありません。