我如何将我的静态资产包含在webpack中，并在angular2应用程序中使用它们？

我有我的应用程序的生产和开发环境单独的文件，我的开发环境工作正常，我没有得到如何使用我的静态资产在webpack中，并在应用程序中使用它们，他们被直接访问我的HTML和CSS文件如下所示

authentication.component.html

<img src="/assets/images/myimage.png" /> 

authentication.component.css

 @font-face { font-family: "untitled-font-5"; src:url("/assets/fonts/untitled-font-5.eot"); src:url("/assets/fonts/untitled-font-5.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/untitled-font-5.woff") format("woff"), url("/assets/fonts/untitled-font-5.ttf") format("truetype"), url("/assets/fonts/untitled-font-5.svg#untitled-font-5") format("svg"); font-weight: normal; font-style: normal; } 

这是我的项目的目录结构

和我的webpackconfiguration文件

共同

 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var helpers = require('./helpers'); module.exports = { entry: { 'vendor': './src/vendor.ts', 'app': './src/app/main.ts' }, resolve: { extensions: ['', '.ts', '.js'] }, 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'] }), new HtmlWebpackPlugin({ template: 'src/index.html' }), new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery', "window.jQuery": "jquery" }) ] }; 

开发

 var webpackMerge = require('webpack-merge'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var commonConfig = require('./webpack.common.js'); var helpers = require('./helpers'); module.exports = webpackMerge(commonConfig, { devtool: 'cheap-module-eval-source-map', output: { path: helpers.root('dist'), publicPath: 'http://localhost:3000/', filename: '[name].js', chunkFilename: '[id].chunk.js' }, plugins: [ new ExtractTextPlugin('[name].css') ], devServer: { historyApiFallback: true, stats: 'minimal' } }); 

刺

 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) } }) ] });