package.json
{
"name": "web20",
"version": "1.0.0",
"description": "Grunt tasks",
"scripts": {
"lint": "eslint-nibble WebContent/src/_common/**/*.js WebContent/src/account/**/*.js WebContent/src/advisor/**/*.js WebContent/src/contactUs/**/*.js WebContent/src/csv-ie/**/*.js WebContent/src/fund/**/*.js WebContent/src/intersticeEvents/**/*.js WebContent/src/login/**/*.js WebContent/src/termsAndConditions/**/*.js WebContent/src/userAdmin/**/*.js",
"test": "karma start",
"test-chrome": "karma start --no-single-run --browsers Chrome",
"server-original": "webpack-dev-server --color",
"build": "rimraf dist && webpack --bail --progress --profile",
"server": "webpack-dev-server --history-api-fallback --inline --progress --color",
"start": "npm run server-original",
"install-artifacts": "npm i && npm shrinkwrap --dev"
},
"license": "UNLICENSED",
"dependencies": {
"angular": "1.4.14",
"angular-animate": "1.4.14",
"angular-aria": "1.4.14",
"angular-base64": "2.0.5",
"angular-cookies": "1.4.14",
"angular-hotkeys": "1.4.5",
"angular-resource": "1.4.14",
"angular-route": "1.4.14",
"angular-sanitize": "1.4.14",
"angulartics": "0.19.x",
"bootstrap": "5.3.0-alpha3",
"file-saver": "^1.3.3",
"jquery": "3.6.4",
"moment": "2.29.4",
"ng-csv": "0.3.6",
"numeral": "1.5.3"
},
"devDependencies": {
"angular-mocks": "^1.5.0",
"autoprefixer": "10.4.14",
"autoprefixer-loader": "3.2.0",
"babel-core": "6.26.3",
"babel-loader": "9.1.2",
"babel-polyfill": "6.26.0",
"@babel/preset-env": "7.21.5",
"clean-css": "5.3.2",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "6.7.4",
"eslint-nibble": "8.1.0",
"file-loader": "6.2.0",
"globule": "1.3.4",
"html-loader": "4.2.0",
"html-replace-webpack-plugin": "2.6.0",
"html-webpack-plugin": "5.5.1",
"isparta-loader": "2.0.0",
"jasmine-core": "^2.3.4",
"karma": "^1.1.0",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^1.7.0",
"less": "4.1.3",
"less-loader": "11.1.0",
"mini-css-extract-plugin": "2.7.5",
"ng-annotate": "1.2.2",
"babel-plugin-angularjs-annotate": "0.10.0",
"ngannotate-loader": "1.1.0",
"ngtemplate-loader": "2.1.0",
"node-dir": "0.1.17",
"node-libs-browser": "2.2.1",
"null-loader": "4.0.1",
"phantomjs-prebuilt": "^2.1.4",
"postcss-loader": "7.3.0",
"protractor": "7.0.0",
"raw-loader": "4.0.2",
"rimraf": "5.0.1",
"script-loader": "^0.7.2",
"style-loader": "3.3.3",
"url-loader": "4.1.1",
"webpack": "5.82.0",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "4.15.0"
}
}
webpackconfig.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var globule = require('globule');
var CSSExtractPlugin = require('mini-css-extract-plugin');
var HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');
var fs = require('fs');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
var loginFiles = globule.find([__dirname + "/WebContent/src/login/*.js",
__dirname + "/WebContent/src/_common/services/shared/*.js", '!' + __dirname + "/WebContent/src/login/login.js"]);
loginFiles.unshift(__dirname + "/app-login.js");
var appFiles = globule.find([__dirname + "/WebContent/src/**/*.js", '!' + '!'
+ __dirname + "/WebContent/src/**/!(*spec).js", '!' + __dirname + "/WebContent/src/app.js", '!' + __dirname +
"/WebContent/src/vendor/**/*", '!' + __dirname + "/WebContent/src/login/*"]);
appFiles.unshift(__dirname + "/index.js");
var lessFiles = globule.find([__dirname + "/WebContent/src/_less/*", '!' + __dirname + "/WebContent/src/_less/client.less"]);
config.entry = isTest ? {} : {
app: appFiles,
login: loginFiles,
less: lessFiles
};
// config.debug = true;
config.output = isTest ? {} : {
// Absolute output directory
path: __dirname + '/dist',
// Output path from the view of the page
// Uses webpack-dev-server in development
publicPath: isProd ? './' : 'http://localhost:9001/',
// Filename for entry points
// Only adds hash in build mode
filename: isProd ? '[name].[fullhash].js' : '[name].bundle.js',
// Filename for non-entry points
// Only adds hash in build mode
chunkFilename: isProd ? '[name].[fullhash].js' : '[name].bundle.js'
};
/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isTest) {
config.devtool = 'inline-source-map';
} else if (isProd) {
config.devtool = 'source-map';
} else {
config.devtool = 'eval-source-map';
}
config.module = {
rules: [
{
test: /\.html$/,
use: [
{loader:'ngtemplate-loader?relativeTo=/ifastweb20-ui/WebContent/src'},
{loader:'html-loader',options: {sources: false}}
]
},
{
test: /\.js$/, loader: 'babel-loader', exclude: /(node_modules|vendor)/
},
// {
// test: /\.(ttf|eot|woff|woff2)$/,
// loader: 'file-loader?name=vendor/open-sans/[name].[ext]'
// },
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'file-loader',
options: {
publicPath: 'images/',
outputPath: '_assets/css/images/',
name: '[name].[ext]'
}
},
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
publicPath: '../../vendor/open-sans/',
outputPath: 'vendor/open-sans/',
name: '[name].[ext]'
}
}
]
};
config.resolve = {
alias: {
'spin': 'spin.js', // Workaround a bug in angular-spinner.
'ng-csv': './node_modules/ng-csv/build/ng-csv.js' // Workaround for badly minified file from vendor creating invalid BOM
},
fallback: {
fs: false,
"path": false
}
};
config.plugins = [
new webpack.DefinePlugin({}),
new webpack.HotModuleReplacementPlugin()
];
var rules = [];
var lessFiles = fs.readdirSync(__dirname + '/WebContent/src/_less');
var hash = Date.now();
//we need a loader for each less file as we need separate css files for each client
lessFiles.forEach(function (file) {
"use strict";
var name;
//css files right now are compiled without the properties namespacing, strip that here
if (file.indexOf('properties') > -1) {
name = file.split('properties.less')[0];
}
else {
name = file.split('.less')[0] + '.';
}
rules.push(new CSSExtractPlugin({filename: "_assets/css/[name].css"}));
var loaderName = name + 'properties.less';
if (file.indexOf('properties') === -1) {
loaderName = name + 'less';
}
config.module.rules.push({
test: new RegExp(loaderName + '$', 'i'),
use: [CSSExtractPlugin.loader,'style-loader', 'css-loader','less-loader']
});
config.plugins.push(rules[rules.length - 1]);
});
config.plugins.push(new HtmlReplaceWebpackPlugin([
{
pattern: /_HASH_/g,
replacement: function() {
"use strict";
return hash;
}
}
]));
// Skip rendering index.html in test mode
if (!isTest) {
// Reference: https://github.com/ampedandwired/html-webpack-plugin
// Render index.html
config.plugins.push(
new HtmlWebpackPlugin({
template: './WebContent/src/index.ejs',
filename: 'index.html',
inject: 'head',
chunks: ['app']
}),
new HtmlWebpackPlugin({
template: './WebContent/src/login.ejs',
filename: 'login.html',
inject: 'head',
chunks: ['login']
}),
new HtmlWebpackPlugin({
template: './WebContent/src/login_error.ejs',
filename: 'login_error.html',
inject: 'head',
chunks: ['login']
})
)
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoEmitOnErrorsPlugin(),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([
{from: __dirname + '/WebContent/src/logout.html', to: 'logout.html'},
{from: __dirname + '/WebContent/src/404.html', to: '404.html'},
{from: __dirname + '/WebContent/src/_assets/images', to: '_assets/images'},
{from: __dirname + '/WebContent/src/vendor', to: 'vendor'}
])
)
}
config.devServer = {
static: {
directory: './WebContent/src'
},
devMiddleware: {
stats: 'minimal',
},
hot: true,
port: 9001,
};
return config;
}();
i am trying to build the application (npm run build). there is no errors. build is successful.
less files are located in web20-ui/WebContent/src/_less/ i am expecting css files to be generated in web20-ui/dist/_assets/css/ But no files generated even though less files are parsed by less loader
