Question

这是我的（简化的）Angular 2 app文件夹结构：

这是我的webpack.config.js：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'polyfills': './polyfills.ts',
        'vendor': './vendor.ts',        
        'app': './app/main.ts'},
    output: {
        path: './dist',
        filename: '[name].js',
        chunkFilename: "[id].bundle.js",
        sourcemapFilename: '[name].map'
    },
    module: {
        loaders: [
            {test: /\.ts$/, loaders: ['ts', '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$/, loaders: 'style!css' }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
            }),       
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ]
}

当我执行webpack build时， dist 文件夹仅获取index.html，app.js，polyfills.js和vendor.js。 app.component.html，css和用户组件html文件不会被复制（在相应的文件夹，app，app / users ...中）到dist文件夹。

我错过了什么？

修改

这是Dev Tools的外观：

Answer 1

以下是它的工作原理。插件angular2-template-loader查找templateUrl并转换组件

中的路径

这

templateUrl; 'path'

到

 `require("templatePath")`

什么webpack理解并使用组件在bundle.js中构建它。你可以看到你的构建并找到类似的东西

 template: __webpack_require__(id).

它不会为您创建单独的html文件，它将所有内容捆绑在一起并作为请求提供给您。作为你的webpack，将只有app.js，pollyfills.js，vendor.js和index.html

以下是完整组件的示例

@Component({
    templateUrl: "./home.template.html",
})

并在你的webpack中

{test: /\.ts$/, loaders: ["ts-loader","angular2-template-loader"]},

Answer 2

我无法转换我的应用并使其以这种方式工作，所以我按照Angular Docs Webpack: an introduction中描述的步骤创建了一个干净的项目，然后复制了我的组件一个接一个，检查我在构建时得到的错误，大多是错误的路径位置，然后纠正它们。它似乎工作到目前为止。

为什么Webpack不会复制我的ng2模板文件？

2 个答案: