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'),
  ....
  )}

据我从文档中了解到的，我认为这应该足够了，但我仍然缺少一些东西。

请注意，我也尝试过使用 raw-loader，它也无法捆绑 HTML 文件。我想知道导入的格式是否需要更接近 "require("html!./file.html");" 所以我也试过了，没有成功。我没有收到任何错误或任何调试信息，不幸的是，我所拥有的只是缺少 HTML 文件。有任何想法吗？

4

1 回答 1

1

在您的 webpack 配置中，您是否也将“.html”添加到resolve.extensions数组中？

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