- Install plugin
webpack-notifier
-
npm install webpack-notifier
- Create
webpack.config.js
file and add content bellow into:
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.gql', '.graphql'],
modules: [path.resolve(__dirname), 'node_modules']
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
}
]
},
plugins: [
new WebpackNotifierPlugin({
alwaysNotify: true,
title: 'Akita'
})
]
};
- Installation and configuration
-
Link github for guide ๐ ๐ ๐
-
npm install @angular-builders/custom-webpack
-
Inside
angular.json
file
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "my-app:build",
"customWebpackConfig": {
"path": "./webpack.config.js"
}
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
}
}
},
- This is a content when start with
dev
mode. Insted, if you want use withpro
mode, please do the same as above (dev
) mode
- Create
@types
folder andgraphql.d.ts
file, and add content bellow into:
declare module '*.graphql' {
import { DocumentNode } from 'graphql';
const value: {
[key: string]: DocumentNode;
};
export = value;
}
This enables us to import graphql files, which is used to communicate with the graphql server