Webpack 2 URLを使用しているときにモジュールが見つかりません

Question

私のAngular 2プロジェクトは、うまく動作しているWebpack 2で動作するように更新しました。しかし、私はresolve: { alias: {...} }キーを使用するときに新しい問題に直面しています。 iはWebPACKの1を使用する場合

は、このコードはうまく働いた：

webpack.config.js

resolve: { 
    // http://webpack.github.io/docs/configuration.html#resolve-extensions 
    extensions: ['.ts', '.js', '.json', '.css', '.html'], 
    alias: { 
     "orion/editor/edit": "http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js" 
    } 
}, 

角度成分：今

ngOnInit() { 
    Promise.all([ 
     require('http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js'), 
     require('http://eclipse.org/orion/editor/releases/current/built-editor.css') 
    ]).then(function() { 
     requirejs(['orion/editor/edit'], function (edit: any) { 
      this.orionEditor = edit({className: 'editor', parent: 'xml'})[0]; 
      this.receiveXmlData(); 
     }.bind(this)); 
    }.bind(this)); 
} 

のWebPACKを使用して2、私は常に両方のファイルを解決することはできませんエラーが発生します。誰にもアイデアはありますか？

Module not found: Error: Can't resolve ' http://eclipse.org/orion/editor/releases/current/built-editor.css ' in [Angular-component file]

Module not found: Error: Can't resolve ' http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js ' in 'C:\Applications\winery\enpro-winery\org.eclipse.winery.ui\src\app\instance\editXML'

は今まで試してくださいマイ：

const path = require('path'); 

    resolve: { 
     extensions: ['.ts', '.js', '.json', '.css', '.html'], 
     alias: { 
      "orion/editor/edit": path.resolve("http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js") 
    } 

と

resolve: { 
     extensions: ['.ts', '.js', '.json', '.css', '.html'], 
     modules: [ 
      path.join(__dirname, "src"), 
      "node_modules", 
      path.resolve("http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js"), 
      path.resolve("http://eclipse.org/orion/editor/releases/current/built-editor.css") 
    ] 
}, 

Answer 1

実は、私は解決策を見つけた：私は誤って私のpackage.jsonからresolve-url-loader依存関係を削除しました。

さらに、解決オブジェクトにaliasまたはpath.resolveを含める必要もないことがわかりました。

Answer 2

変更設定を：私が試したwebpack2ため webpack.common.jsで

をin webpack.common .jsファイルがあります。

module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      }, 
      { 
       test: /\.json$/, 
       exclude: /node_modules/, 
       loader: 'file-loader?name=[name].json' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'file-loader?name=assets/[name].[ext]' 
      }, 
      { 
       test: /\.css$/, 
       exclude: helpers.root('src', 'app'), 
       loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) 
      }, 
      { 
       test: /\.css$/, 
       include: helpers.root('src', 'app'), 
       loader: 'raw-loader' 
      }, 
      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       loaders: ['raw-loader', 'sass-loader'] 
      }, 

     ] 
    }, 


plugins: [ 
    // Workaround for angular/angular#11580 
    new webpack.ContextReplacementPlugin(
     // The (\\|\/) piece accounts for path separators in *nix and Windows 
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     helpers.root('./src'), // location of your src 
     {} // a map of your routes 
    ), 
]