Question

我使用webpack构建一个角度项目。我的webpack配置从另一个项目中复制，并在其中成功运行。

但在我的项目中，它不会将.html模板包含在生成的javascript包中。

这里是感兴趣的webpack配置的一部分：

const webpackConfig = {
    ...
    module: {
        ...
        plugins: [
            new HtmlWebpackPlugin({
                inject: "body",
                template: "app/index.html",
                filename: "index.html"
             })
        ],
        loaders: [
            ...
            {
                test: /\.html$/,
                exclude: `${path.join(__dirname, "/app/index.html")}`,
                loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"]
            }
        ]
    }
}

我项目的脚手架如下：

├── app
│   ├── app.js
│   ├── components
│   │   ├── auth
│   │   │   ├── auth.module.js
│   │   │   ├── auth.service.js
│   │   │   └── user.service.js
│   │   ├── footer
│   │   │   └── footer.html
│   │   ├── header
│   │   │   └── header.html
│   │   ├── home
│   │   │   ├── home.html
│   │   │   └── home.module.js
│   │   ├── navigation
│   │   │   └── navigation.html
│   │   ├── right_sidebar
│   │   │   └── right_sidebar.html
│   │   └── util
│   │       ├── util.module.js
│   │       └── util.service.js
│   ├── index.html
│   └── shared
├── assets
├── package.json
├── gulpfile.js
└── webpack.config.js

在index.html我说：

<div id="header" ng-include="'/components/header/header.html'"></div>

和标题模板未包含在生成的app.<hash>.js包中。如何调试？

Answer 1

默认情况下，

Html-loader未解析ng-include属性。因此，您需要将attrs parameter传递给loader：

html?attrs[]=div:ng-include

Webpack ngTemplate-loader不会将我的模板包含在软件包中：如何调试？

1 个答案: