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 вы добавили '.html' в массив resolve.extensions?

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