部署Angular 2教程webpack build

我按照這裏的教程：https://angular.io/docs/ts/latest/guide/webpack.html

，並發現創建我構建的DIST，在試圖運行它，在本地和Github上頁，我對我的包文件收到一個404錯誤。

我跟着教程行的線，它似乎並沒有工作。

任何人都可以幫忙嗎？

我的WebPack編譯如下：

webpack.common.js

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
     'polyfills': './src/polyfills.ts', 
     'vendor': './src/vendor.ts', 
     'app': './src/main.ts' 
    }, 

    resolve: { 
     extensions: ['', '.js', '.ts'] 
    }, 

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

    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor', 'polyfills'] 
     }), 

     new HtmlWebpackPlugin({ 
      template: 'src/index.html' 
     }) 
    ] 
};

webpack.prod.js

var webpack = require('webpack'); 
var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack.common.js'); 
var helpers = require('./helpers'); 

const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 

    output: { 
     path: helpers.root('dist'), 
     publicPath: '/', 
     filename: '[name].[hash].js', 
     chunkFilename: '[id].[hash].chunk.js' 
    }, 

    htmlLoader: { 
     minimize: false // workaround for ng2 
    }, 

    plugins: [ 
     new webpack.NoErrorsPlugin(), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 
      mangle: { 
       keep_fnames: true 
      } 
     }), 
     new ExtractTextPlugin('[name].[hash].css'), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'ENV': JSON.stringify(ENV) 
      } 
     }) 
    ] 
});

的Index.html

<!DOCTYPE html> 
<html> 

<head> 
    <base href=/> 
    <title>Angular With Webpack</title> 
    <meta charset=UTF-8> 
    <meta name=viewport content="width=device-width,initial-scale=1"> 
    <link href="/app.f053dbe7ce9dd32c3e43.css" rel="stylesheet"> 
</head> 

<body> 
    <my-app>Loading...</my-app> 
    <script type="text/javascript" src="/polyfills.f053dbe7ce9dd32c3e43.js"></script> 
    <script type="text/javascript" src="/vendor.f053dbe7ce9dd32c3e43.js"></script> 
    <script type="text/javascript" src="/app.f053dbe7ce9dd32c3e43.js"></script> 
</body> 

</html>

來源

2016-10-24 GSM85

我有同樣的問題！你在配置目錄中有karma.conf.js嗎？你的項目結構應該是這樣的：

來源

2016-10-24 13:22:25

嘿 - 我確實，我一直在玩，它看起來像是與我的webpack文件中的publicPath：'/'相關 - 它看起來像「「正在從index.html base href中刪除。不知道爲什麼/如何解決這個問題但 – GSM85

看看我的項目：https://github.com/dmaric444/angular2webpackstarter.git –

下載後或git克隆類型npm安裝然後npm開始，然後瀏覽到localhost：8080 –

部署Angular 2教程webpack build

回答

相關問題