在角度应用中使用自定义webpack
在角度应用中使用自定义webpack
提问于 2020-05-10 20:04:19
我想运行webpack的角度应用程序，所以我写了这样的代码。
package.json文件
"scripts": {
"start_ar": "ng build --watch --configuration=dev_ar",
},
"devDependencies": {
"@angular-builders/custom-webpack": "^7.1.4",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"url-loader": "^1.0.1"
}中的angular.json文件
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js",
"replaceDuplicatePlugins": true
},In webpack.config.js
module.exports = {
module : {
rules: [
{
"test": /\.(jpg|png|webp|gif|otf|ani|ico|cur)$/,
"loader": "url-loader",
"options": {
"name": "[name].[hash:7].[ext]",
"limit": 10000,
"outputPath": "../assets/img/",
"publicPath": "src/assets/img/"
}
}]}};但是问题是，图像仍然是这样的，像webpack没有跑，我没有错误，但我没有看到任何变化的图像，有什么遗漏在这个代码中吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-10 20:15:41
角cli不再允许您修改webpack文件。相反，您应该使用角构造器来执行修改。
建设者之一是ngx-。您应该查看它的文档，以获得完整的功能列表
下面是从它的文档中采取的步骤
添加ngx build：
ng add ngx-build-plus注意:如果要将其添加到项目文件夹中的特定子项目中，请使用-项目开关来指向它：ng add ngx-build-plus --project getting-started。 注意:此步骤通过npm安装包并更新angular.json，以便项目使用自定义构建器进行ng服务和ng构建。 将文件webpack.partial.js添加到(子)项目的根目录：
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
"VERSION": JSON.stringify("4711")
})
] } Use the global variable VERSION in your app.component.ts:
import { Component } from '@angular/core';
declare const VERSION: string;
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Version: ' + VERSION; } Start your application with the --extra-webpack-config switch pointing to your partial webpack config:
ng serve --extra-webpack-config webpack.partial.js -o如果您的项目是基于CLI的子项目，也可以使用--项目开关：ng serve --project getting-started -o --extra-webpack-config webpack.partial.js提示:考虑为此命令创建npm脚本。
因此，在您的例子中，webpack.partial.js的内容将是
const webpack = require('webpack');
module.exports = {
module : {
rules: [
{
"test": /\.(jpg|png|webp|gif|otf|ani|ico|cur)$/,
"loader": "url-loader",
"options": {
"name": "[name].[hash:7].[ext]",
"limit": 10000,
"outputPath": "../assets/img/",
"publicPath": "src/assets/img/"
}
}]}};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61718027
复制相关文章
相似问题
腾讯云开发者
