1

なんらかの理由で、webpack は生成したバンドルに HTML ファイルをバンドルしません。他のすべてがバンドルされていますが、残念ながら私の HTML ファイルはバンドルされていません。

私はAngular 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 ファイルが不足しているだけです。何か案は？

4

1 に答える 1

1

Webpack の構成で、resolve.extensions配列に「.html」も追加しましたか?

resolve: {
    extensions: ['.html', '.js', ....]
}
于 2016-09-27T14:43:40.857 に答える