2016-09-27 17 views
1

何らかの理由で私は現在理解していませんが、webpackは自分のHTMLファイルをバンドルにバンドルしません。他のものはすべてバンドルされていますが、残念ながら私のHTMLファイルはバンドルされていません。Webpackは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:

十分な私が考えるべきであること、私の知る限りでは docsから

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

が、私はまだ何かが欠けている:

そして私は経由して、私のコンポーネントで、私のHTMLに引っ張っています。

また、HTMLファイルをバンドルすることもできなかったローダーを使ってみました。私は、インポートのフォーマットが "require(" html!./ file.html ");に近づく必要があるかどうか、だから私は成功もせずにそれを試みた。私は残念ながら、私はHTMLファイルが欠けているすべてのエラーやデバッグ情報を取得していません。何か案は?

答えて

1

ウェブパック設定では、resolve.extensionsアレイにも '.html'を追加しましたか?

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

私はしませんでしたが、残念ながらそれは問題を解決しませんでした。私は私の投稿を編集して、完全なWebpack設定を含めるようにします。 – jeeves90

関連する問題