使用webpack搭建angular2+systemjs项目404模板报错

Question

我想配置 webpack 只是为了构建我的项目（至少现在是这样），同时让 systemjs 正常工作（这个项目的开发是从 systemjs 开始的）。

现在，我三天前尝试在我的项目中插入 webpack，我基本上使用了我在这里找到的所有内容（没有触及任何关于 webpack 配置的内容）https://angular.io/docs/ts/latest/guide/webpack.html

我将 tsconfig.json 切换到 commonjs，我启动了您可以在链接中找到的 npm run build 命令，并修改了 dist/index.html 以制作它完全兼容（删除一些原始 systemjs 的东西）。 但无论如何，我都充满了 404 错误，因为 zone.js 找不到我的组件的模板，但是如果我将所有模板移动到他想要的位置，它就可以完美地工作。

我搜索了这个东西，这是由于 webpack 需要使用 require 获取模板，但是 angular2-template-loader 是故意在那里的，它不起作用吗？我应该怎么做才能解决这个问题？

这是主要的 webpack 配置（在 Angular 指南中命名为 webpack.common.js）：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

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

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

希望得到帮助，谢谢。

Answer 1

我遇到了同样的问题，作为临时解决方案，我正在使用 copy-webpack-plugin 复制 css 和 html 文件。

为此，将 CopyWebpackPlugin 添加到 package.json 文件中的 devDependencies 中：

"copy-webpack-plugin": "^2.1.3",

然后在你的 webpack.common.js 文件的顶部添加 require 语句：

var CopyWebpackPlugin = require('copy-webpack-plugin');

然后在 webpack.common.js 文件的 plugins 部分中使用它：

 plugins: [
  new CopyWebpackPlugin([
      { from: 'src/*.html', to: './' }
  ]),
  new CopyWebpackPlugin([
      { from: 'src/*.css', to: './' }
  ])
]