Question

出于某些原因，我目前不明白，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文件。有什么想法吗？

Answer 1

在您的网络包配置中，您是否添加了＆＃39; .html＆＃39;也是resolve: { extensions: ['.html', '.js', ....] }数组？

{{1}}

Webpack不捆绑我的HTML文件

1 个答案: