如何使用文件加载器复制 html 之类的静态资产或 angular(2 或 4)中的文件
How to copy static asset like html or files in angular (2 or 4) using file-loader
我正在开发一个使用 angular 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 });
}
}
你能帮我理解这里出了什么问题吗
我弄错了。这可能对其他人有用。所以只是更新我的答案。
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()]
})
我正在开发一个使用 angular 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 });
}
}
你能帮我理解这里出了什么问题吗
我弄错了。这可能对其他人有用。所以只是更新我的答案。
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()]
})