使用webpack构建angular2 + systemjs项目404模板错误

Question

我想配置webpack只是为了构建我的项目（至少现在是这样），同时保持systemjs的工作（此项目的开发是从systemjs开始的）。现在

，我试过三天前在我的项目中插入的WebPack，我基本上都用我发现这里（没有触及有关的WebPack配置任何东西）https://angular.io/docs/ts/latest/guide/webpack.html

我切换到tsconfig.json CommonJS的 ，我启动了npm run build命令，您可以在链接中找到它，并修改dist/index.html以使其完全兼容（删除一些原始的systemjs内容）。 但无论如何，我满满404错误，因为zone.js找不到我的组件的模板，但如果我将所有模板移动到他想要的位置，它完美地工作。

我搜索了这个东西，这是由于webpack需要获得模板的要求，但angular2模板加载器是在那里的目的，它不工作？我应该怎么做才能解决这个问题？

这是主要的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' 
    }) 
    ] 
}; 

盼望帮助，谢谢。

Answer 1

我遇到了同样的问题，并且使用copy-webpack-plugin复制了css和html文件作为临时解决方案。

要做到这一点的CopyWebpackPlugin添加到devDependencies在的package.json文件：

"copy-webpack-plugin": "^2.1.3", 

然后在你的webpack.common.js文件中添加需要在声明顶端：

var CopyWebpackPlugin = require('copy-webpack-plugin'); 

然后你用它在你的插件您webpack.common.js文件部分：

plugins: [ 
    new CopyWebpackPlugin([ 
     { from: 'src/*.html', to: './' } 
    ]), 
    new CopyWebpackPlugin([ 
     { from: 'src/*.css', to: './' } 
    ]) 
]