Removing specific vendor css from generated Microsoft SPA Template VS2017 webpack

Home / Uncategorized / Removing specific vendor css from generated Microsoft SPA Template VS2017 webpack

Question:
I’ve created a couple of SPA projects using the Microsoft templates.
dotnet new –install Microsoft.AspNetCore.SpaTemplates::*

Then running:dotnet new angular

or
dotnet new aurelia

Both projects generate file named webpack.config.vendor.js which looks like the following (from angular sample):const path = require(‘path’);
const webpack = require(‘webpack’);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);
const merge = require(‘webpack-merge’);

module.exports = (env) => {
const extractCSS = new ExtractTextPlugin(‘vendor.css’);
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: [ ‘.js’ ] },
module: {
rules: [
{ test: /.(png|woff|woff2|eot|ttf|svg)(?|$)/, use: ‘url-loader?limit=100000’ }
]
},
entry: {
vendor: [
‘@angular/animations’,
‘@angular/common’,
‘@angular/compiler’,
‘@angular/core’,
‘@angular/forms’,
‘@angular/http’,
‘@angular/platform-browser’,
‘@angular/platform-browser-dynamic’,
‘@angular/router’,
‘bootstrap’,
‘bootstrap/dist/css/bootstrap.css’,
‘es6-shim’,
‘es6-promise’,
‘event-source-polyfill’,
‘jquery’,
‘zone.js’,
]
},
output: {
publicPath: ‘/dist/’,
filename: ‘[name].js’,
library: ‘[name]_[hash]’
},
plugins: [
new webpack.ProvidePlugin({ $: ‘jquery’, jQuery: ‘jquery’ }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/@angularb.*b(bundles|linker)/, path.join(__dirname, ‘./ClientApp’)), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\|/)core(\|/)@angular/, path.join(__dirname, ‘./ClientApp’)), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};

const clientBundleConfig = merge(sharedConfig, {
output: { path: path.join(__dirname, ‘wwwroot’, ‘dist’) },
module: {
rules: [
{ test: /.css(?|$)/, use: extractCSS.extract({ use: isDevBuild ? ‘css-loader’ : ‘css-loader?minimize’ }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, ‘wwwroot’, ‘dist’, ‘[name]-manifest.json’),
name: ‘[name]_[hash]’
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});

const serverBundleConfig = merge(sharedConfig, {
target: ‘node’,
resolve: { mainFields: [‘main’] },
output: {
path: path.join(__dirname, ‘ClientApp’, ‘dist’),
libraryTarget: ‘commonjs2’,
},
module: {
rules: [ { test: /.css(?|$)/, use: [‘to-string-loader’, isDevBuild ? ‘css-loader’ : ‘css-loader?minimize’ ] } ]
},
entry: { vendor: [‘aspnet-prerendering’] },
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, ‘ClientApp’, ‘dist’, ‘[name]-manifest.json’),
name: ‘[name]_[hash]’
})
]
});

return [clientBundleConfig, serverBundleConfig];
}

Now I want to remove Bootstrap from the equation. I’ve tried removing the following lines from entry->bootstrap:’bootstrap’,
‘bootstrap/dist/css/bootstrap.css’,

But bootstrap still appears in the final vendor.css. I’m still getting up to speed with WebPack (slowly).

What do I need to do to remove bootstrap from the vendor.css output?


Answer:
In package.json in your root folder.

add
"scripts": {
"build": "npm install && npm run webpack",
"webpack": "webpack –config webpack.config.vendor.js && webpack"
},

In webpack.config.vendor.js
entry: {
vendor: [
‘aurelia-event-aggregator’,
‘aurelia-fetch-client’,
‘aurelia-framework’,
‘aurelia-history-browser’,
‘aurelia-logging-console’,
‘aurelia-pal-browser’,
‘aurelia-polyfills’,
‘aurelia-route-recognizer’,
‘aurelia-router’,
‘aurelia-templating-binding’,
‘aurelia-templating-resources’,
‘aurelia-templating-router’,
**//Remove the following two lines**
‘bootstrap’,
‘bootstrap/dist/css/bootstrap.css’,
‘jquery’
],
},

then run the following command.
npm run webpack
Read more

Leave a Reply

Your email address will not be published. Required fields are marked *