Webpack不捆綁我的HTML文件

Question

由於某些原因，我目前不明白，webpack不會將我的HTML文件捆綁到它生成的捆綁包中。它捆綁了其他所有東西，但遺憾的不是我的HTML文件。

我使用角2，已包括的依賴關係：

"html-loader": "^0.4.4", 
"html-webpack-plugin": "^2.22.0", 

的webpack.config：

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

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

    output: { 
     path: helpers.root('dist'), 
     publicPath: 'http://localhost:8080/', 
     filename: 'bundle.js' 
    }, 

    externals: [ 
     { 
      './node_modules/core-js/client/shim.min.js': 'shim', 
      './node_modules/zone.js/dist/zone.js': 'zone', 
      './node_modules/reflect-metadata/Reflect.js': 'reflect', 
      './node_modules/x2js/x2js.js': 'x2js' 
     } 
    ] 
} 

的webpack.common：

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

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

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

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

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

    new HtmlWebpackPlugin({ 
     template: 'index.html', 
     chunksSortMode: 'dependency' 
    }) 
    ] 
}; 

而且webpack.prod：

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'); 

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 ExtractTextPlugin('[name].[hash].css') 
    ] 
}); 

而且我通過拉在我的HTML在我的組件：

@Component({ 
    .... 
    template: require('app/customer-client/customer-client.html'), 
    .... 
)} 

就從docs我所知，這應該是足夠的，我認爲，但我仍然失去了一些東西。

請注意，我也嘗試使用raw-loader，這也未能捆綁HTML文件。我想知道導入的格式是否需要更接近「require（」html！./ file.html「）;」所以我也嘗試過，沒有成功。我沒有得到任何錯誤或任何調試信息，不幸的是我所有的都缺少HTML文件。有任何想法嗎？

Answer 1

在您的webpack配置中，您是否也向resolve.extensions陣列添加了「.html」？

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