使用URL時未找到Webpack 2模塊

Question

我剛剛更新了我的Angular 2項目以使用Webpack 2，它工作得很好。但是，使用resolve: { alias: {...} }密鑰時，我正面臨一個新問題。

當我用的WebPack 1，此代碼只是工作得很好：使用時

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：

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" 
    } 
}, 

角度成分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

更改配置：在webpack.common.js 爲webpack2我試圖

在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 
    ), 
]