Question

我正在开发一个使用角度4的应用程序，捆绑由webpack完成。

我能够正确捆绑所有js文件。但是当我尝试使用文件加载器复制html文件时。它无法正常工作，也无法将其复制到输出文件夹中。

请找到我的webpack.config.js文件。

var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

module.exports = {

    entry: './app/main.ts',
    output: {
        path: path.join(__dirname, 'appbundle'),
        filename: 'app.bundle.js',
        publicPath: '/'
    },

    module: {
        rules: [
            {

                test: /\.html$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },

            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('raw-loader!sass-loader') },
            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' }
        ]
    },

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

    plugins: [
        new ExtractTextPlugin('app.bundle.css'),
        new HtmlWebpackPlugin({
            template: "index.html",
            filename: "index.html"
        })
    ]
};

其中一个html文件。

 import { Component, OnInit } from "@angular/core";
    import { HeaderComponent } from "./components/header/header.component";
    import { SidebarComponent } from "./components/navigation/sidebar.component";
    import { DashboardComponent } from "./components/dashboard/dashboard.component";
    import { RouterOutlet } from "@angular/router"
    import { Observable, BehaviorSubject } from "rxjs";
    import { PageTitleService } from "./services/pagetitle.service";
    import {DateRangePickerComponent} from "./components/datepicker/lart.datepicker.component";
    import {CustomDatePicker} from "./components/datepicker/custom.datepicker";
    import {LoadingComponent} from  "./components/loading/loading.component";

    @Component({
        selector: "lart-root",
         templateUrl:'./app.component.html',
        styles: [require('./app.component.scss').toString()]
    })

    export class AppComponent implements OnInit {
        public pageTitle: string;
        private pageTitle$: Observable<string>;


        constructor(private pageTitleService: PageTitleService) {
            this.pageTitle$ = pageTitleService.pageTitle$;


        }

        ngOnInit() {
            this.pageTitle$.subscribe(title => { this.pageTitle = title });

        }
    }

请你帮我理解这里出了什么问题

Answer 1

我弄错了。这可能对其他人有用。所以只是更新我的答案。

Webpack.config.js

 module: {
    rules: [
        {
            test: /\.html$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        publicPath:'/'
                    },
                }

            ],
            include: path.join(__dirname, 'app'),
            exclude: [
                path.join(__dirname, 'index.html'),
                path.join(__dirname, 'appbundle', 'index.html')
            ],
        },
        {
            test: /\.ts$/,
              loader:'ts-loader'
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    {
                        loader: "css-loader"
                    }]
            }),
            include: path.join(__dirname, 'content', 'css'),
        },
        {
            test: /\.(scss)$/,
            loader: ExtractTextPlugin.extract(
                {
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader"
                        },
                        {
                            loader: "sass-loader"
                        }]
                }
            ),
            exclude: path.join(__dirname, 'content', 'css'),
        },
        {
            test: /\.(woff2?|ttf|eot|svg)$/,
            loader: 'url-loader?limit=10000'
        }
    ]
}

当我们在ts中引用html文件时。我们需要使用require和templateUrl

@Component({
        selector: "lart-root",
         templateUrl:require('./app.component.html'),
        styles: [require('./app.component.scss').toString()]
    })

如何使用文件加载器以角度（2或4）复制静态资产（如html或文件）

1 个答案: