Skip to content

Instantly share code, notes, and snippets.

@neilsoult
Created June 18, 2020 02:31
Show Gist options
  • Save neilsoult/1f3ea690f9fbe79f13ddb7f160781805 to your computer and use it in GitHub Desktop.
Save neilsoult/1f3ea690f9fbe79f13ddb7f160781805 to your computer and use it in GitHub Desktop.
Custom webpack config to use with @angular-builders/custom-webpack
const ngTools = require("@ngtools/webpack");
const path = require('path');
module.exports = (config) => {
// add pug loader into webpack module rules
config.module.rules = [
{
test: /.(pug|jade)$/,
exclude: /.(include|partial).(pug|jade)$/,
use: [
{ loader: 'apply-loader' },
{ loader: 'pug-loader', options: { root: path.join(config.context, 'src/pug') } }
]
},
{ test: /.(include|partial).(pug|jade)$/, loader: 'pug-loader' },
...config.module.rules
];
// update AngularCompilerPlugin options to turn off directTemplateLoading so we can use pug templates
const options = {
...config.plugins.find(({ constructor: { name }}) => name === 'AngularCompilerPlugin').options,
directTemplateLoading: false
};
// handle additional plugins, including replacing the angularCompilerPlugin with our options
const addPlugins = [new ngTools.AngularCompilerPlugin(options)];
const dupesRemoved = config.plugins.filter(({ constructor: { name }}) => {
return !addPlugins.some(({ constructor: { name: newName }}) => name === newName);
});
config.plugins = [...dupesRemoved, ...addPlugins];
return config;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment