Use custom webpack in angular application

user_9176592 0
Viewed 3318

I want to run webpack in angular application so I wrote the code like this .

package.json file

"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"
 }

In angular.json file 

  "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/"
              }
            }]}};

But the problem is that the image still as is , like that the webpack dose not run , I have no error but I didn't see any change to the image , Is there anything missing in this code ??

angular webpack web
1 Answers

Angular cli does not let you modify webpack file anymore. Instead you should use angular builders to perform modification

One of the the builder is ngx-build-plus. You should checkout it's documentation for it's complete feature list

Following steps are taken from it's documentation

Add ngx-build-plus: ng add ngx-build-plus

Note: If you want to add it to specific sub project in your projects folder, use the --project switch to point to it: ng add ngx-build-plus --project getting-started

Remark: This step installs the package via npm and updates your angular.json so that your project uses custom builders for ng serve and ng build.

Add a file webpack.partial.js to the root of your (sub-)project:

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 If your project is a CLI based sub project, use the --project switch too:

ng serve --project getting-started -o --extra-webpack-config webpack.partial.js Hint: Consider creating a npm script for this command.

So in your case the content of of webpack.partial.js will be 

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/"
              }
            }]}};
user_68165180
Related