部署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

回答

相关问题