How do I configure weyland to optimize the css files and also include the map file of the js in the output?
My current config is:
exports.config = function(weyland) {
weyland.build('main')
.task.jshint({
include: 'App/**/*.js',
exclude: ['App/main-built.js'],
})
.task.uglifyjs({
include: ['App/**/*.js', 'Scripts/durandal/**/*.js'],
exclude: ['App/main-built.js'],
})
.task.rjs({
include: ['Content/**/*.css', 'App/**/*.{js,html}', 'Scripts/durandal/**/*.js'],
exclude: ['App/main-built.js'],
loaderPluginExtensionMaps: {
'.html': 'text',
},
rjs: {
name: '../Scripts/almond-custom', //to deploy with require.js, use the build's name here instead
insertRequire: ['main'], //not needed for require
baseUrl: 'App',
mainConfigFile: 'App/main.js', //not needed for require
wrap: true, //not needed for require
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
preserveLicenseComments: false,
generateSourceMaps: true,
//optimize : 'none',
optimize: 'uglify2',
optimizeCss: 'standard.keepLines',
pragmas: {
build: true
},
stubModules: ['text'],
keepBuildDir: true,
out: 'App/main-built.js'
}
});
}
Related
I am currently facing issue while trying achieve execution of Chrome Browser and Appium execution from browser stack from a single spec file
Below is the code written with multiple capabilities
Attaching log screensot
require('dotenv').config();
require('ts-node').register({ transpileOnly: true });
import { baseConfig as config } from '../test-android-e2e/config/wdio.base.android.conf';
import { baseConfig as configChrome } from '../test-wms-e2e/config/wdio.base.conf'; // inherits base config file
require('ts-node').register({ transpileOnly: true });
import _ from 'lodash';
import os from 'os';
import { TimelineService } from 'wdio-timeline-reporter/timeline-service';
let suiteName = '';
const overrides = {
updateJob: false,
specs: ['./test/specs/**/*.ts'],
specFileRetries: 4,
runner: process.env.RUNNER,
connectionRetryCount: 3,
framework: process.env.FRAMEWORK,
waitforTimeout: 10000,
connectionRetryTimeout: 90000,
exclude: [],
// ...
user: process.env.BROWSERSTACK_USER,
key: process.env.BROWSERSTACK_ACCESSKEY,
services: ['browserstack', [TimelineService], 'chromedriver'],
reporters: [
[
'allure',
{
outputDir: 'allure-results',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: true,
},
],
['timeline', { outputDir: 'screenshots' }],
],
capabilities: {
Android: {
capabilities: [
{
'platformName': 'Android',
'appium:deviceName': 'Samsung Galaxy S21',
'appium:platformVersion': '11.0',
'appium:app': 'sampleid',
'bstack:options': {
'projectName': 'test-android-e2e',
idleTimeout: '300',
},
/* this locale will set device default location as US.
However it does not update language. Hence added separate capability for language */
'appium:locale': 'En-US',
'appium:language': 'En',
},
],
},
Chrome: {
capabilities: [
{
browserName: 'chrome',
'goog:chromeOptions': {
args: [
// 'user-agent=e2e-agent',
// '--headless',
'--disable-dev-shm-usage', // Force Chrome to use the /tmp directory instead. This may slow down the execution though.
'--disable-gpu',
'--no-sandbox',
'--window-size=1920,1080',
'--verbose',
'--trace-startup=-*,disabled-by-default-memory-infra',
'--trace-startup-file=/screenshots/trace.json',
'--trace-startup-duration=7',
],
},
},
],
},
// path: '/',
},
};
// Send the merged config to wdio
exports.config = _.defaultsDeep(overrides, config);
exports.config = _.defaultsDeep(overrides, configChrome);
Screenshot 1
Screenshot 2
In my VUE project, there are several templates which have the same filename but located in different source sub-folders. I'm using webpack 3.12 to build it, and the devtool set to 'cheap-module-eval-source-map'.
After I run webpack-dev-server 2.11.1 to debug it, all template source files are put into the root folder 'webpack://' of the browser's sourcemap, so ONLY one of these files can exist, others are lost, I can't debug them.
Is there a way to make these files co-existing in the sourcemap?
module.exports = {
plugins: [
new VueLoaderPlugin()
],
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', './src/main.js']
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ?
{
warnings: false,
errors: true
} :
false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
}
}
At last, I changed 'cheap-module-eval-source-map' to 'module-eval-source-map', the relative path of source files are kept.
I've read the official document of devtool, it says "it doesn't have column mappings, it only maps line numbers." if "cheap" mode used, I don't understand why the relative path is discarded.
eval-cheap-source-map - Similar to eval-source-map, each module is executed with eval(). It is "cheap" because it doesn't have column
mappings, it only maps line numbers. It ignores SourceMaps from
Loaders and only display transpiled code similar to the eval devtool.
eval-cheap-module-source-map - Similar to eval-cheap-source-map, however, in this case Source Maps from Loaders are processed for
better results. However Loader Source Maps are simplified to a single
mapping per line.
This worked for me when using vue-cli-service serve: https://github.com/vuejs/vue-cli/issues/2978#issuecomment-577364101
In vue.config.js:
let path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// See available sourcemaps:
// https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map'
// console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)
config.output.devtoolModuleFilenameTemplate = info => {
let resPath = path.normalize(info.resourcePath)
let isVue = resPath.match(/\.vue$/)
let isGenerated = info.allLoaders
let generated = `webpack-generated:///${resPath}?${info.hash}`
let vuesource = `vue-source:///${resPath}`
return isVue && isGenerated ? generated : vuesource
}
config.output.devtoolFallbackModuleFilenameTemplate =
'webpack:///[resource-path]?[hash]'
}
},
}
I am trying to run code coverage using https://webpack.js.org/loaders/istanbul-instrumenter-loader/
Here is the karma.conf.js
var testWebpackCfg = require('../webpack/webpack.config.test.js');
module.exports = function(config) {
config.set({
basePath: '../../',
frameworks: ['jasmine'],
plugins: [ 'karma-webpack', 'karma-jasmine-jquery', 'karma-jasmine', 'karma-chrome-launcher','karma-firefox-launcher', 'karma-coverage','karma-spec-reporter', 'karma-jasmine-html-reporter'],
preprocessors: {
'client/test/index.js': ['webpack']
},
reporters: [ 'spec', 'coverage-istanbul'],
coverageIstanbulReporter: {
reports: [ 'text-summary' ],
dir: './coverage',
fixWebpackSourcePaths: true
},
files: [
'client/test/index.js'
],
webpack: testWebpackCfg,
// web server port
port: 9876,
runnerPort: 9100,
urlRoot: '/',
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
browsers: ['Chrome'],
singleRun: true
});
};
Webpack config
{
test: /\.js$/i,
exclude: [
paths.appNodeModules
],
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: ['#babel/preset-env']
}
},
{
loader: require.resolve('istanbul-instrumenter-loader'),
options: {
esModules: true
}
}
]
}
On running the Karma I see this error
'Can not load reporter "coverage-istanbul", it is not registered!
Perhaps you are missing some plugin?'
The error got resolved by adding karma-coverage-istanbul-reporter in the karma config plugin.
npm i karma-coverage-istanbul-reporter --save-dev
karma.conf.js
{
...
plugins: ['karma-coverage-istanbul-reporter']
...
}
I faced the same problem after upgrading to Angular 14 from 11. Adding the Istanbul reporter compared to the Karma reporter solved my issue.
So simply add coverage-istanbul to your reporters in karma.conf.js
Like:
reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
For example:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
...
],
client: {
...
},
coverageIstanbulReporter: {
...
},
reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
})
}
Nishant gives the essential answer, but I found I also got this message when I had not specified the karma config file explicitly, as per this answer:
cant get junit running with Karma
Is there a way to thoroughly mangle vue components that have been bundled with webpack?
When applying mangling via terser-webpack-plugin with mangle.properties set to true, then not all of the property names are mangled, for example:
location: {
lng: -.134281,
lat:51.513508,
zoom:13,
pitch:1,
bearing:60
}
becomes
location:{
k:-.134281,
M:51.513508,
zoom:13,
pitch:1,
V:60
}
Edit
As requested: the relevant portion of the Webpack configuration file, in this case the default vie-cli config with the mangle.properties item manually added:
minimizer: [
{
options: {
test: /\.m?js(\?.*)?$/i,
chunkFilter: () => true,
warningsFilter: () => true,
extractComments: false,
sourceMap: false,
cache: true,
cacheKeys: defaultCacheKeys => defaultCacheKeys,
parallel: true,
include: undefined,
exclude: undefined,
minify: undefined,
terserOptions: {
output: {
comments: /^\**!|#preserve|#license|#cc_on/i
},
compress: {
arrows: false,
collapse_vars: false,
comparisons: false,
computed_props: false,
hoist_funs: false,
hoist_props: false,
hoist_vars: false,
inline: false,
loops: false,
negate_iife: false,
properties: false,
reduce_funcs: false,
reduce_vars: false,
switches: false,
toplevel: false,
typeofs: false,
booleans: true,
if_return: true,
sequences: true,
unused: true,
conditionals: true,
dead_code: true,
evaluate: true
},
mangle: {
safari10: true,
properties: true
}
}
}
}
],
These two properties (zoom, pitch) so happened to be included in the reserved name list, have a look at this default domprops.json file which UglifyJS uses internally during mangling.
A default exclusion file is provided in tools/domprops.json which should cover most standard JS and DOM properties defined in various browsers. Pass --mangle-props domprops to disable this feature
If you like to keep this default list, you could do any of the following in the custom minify option of the plugin:
Create your custom reserved name list,
Load up the default list (domprops.json) and pass in a function/filter for removing those unwanted names,
Simply merge these two files if you are sure there is no name conflict.
webpack.config.js
{
optimization: {
minimizer: [
new TerserPlugin({
minify(file, sourceMap) {
const uglifyJsOptions = {
mangle: {
properties: {
reserved: require('your_custom_list')
}
// Or filter them
properties: {
reserved: require('uglify-js/tools/domprops.json')
.filter(name => ![
'zoom',
'pitch'
]
.includes(name))
}
}
};
return require('uglify-js').minify(file, uglifyJsOptions);
},
}),
],
},
}
Also, please mind the similarities between mangle.reserved and mangle.properties.reserved while doing this, as the latter one might be what you need here. Check out the minify option structure.
I have a karma config which for my unit test and code-cov. My project dir looks like below
RootFOlder
-karma.config.js
-webpack.test.config.js
-src/
--test.ts
--components
---ButonComponent
----Buttoncomponent.spec.ts
And my karma.config is below
// Karma configuration
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'src/test.ts',
'src/components/**/*.component.ts',
],
// list of files / patterns to exclude
exclude: [
'node_modules',
'./src/tsconfig.spec.json'
],
plugins: [
require('karma-jasmine'),
require("karma-coverage"),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-webpack'),
require('karma-sourcemap-loader'),
require('ts-loader')
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/components/**/*.ts': ['coverage'],
'src/components/**/*.component.ts': ['webpack', 'sourcemap'],
'src/test.ts': ['webpack', 'sourcemap'],
},
webpack: require('./webpack.test.config'),
coverageReporter: {
reporters: [
{ type: 'text', subdir: 'text' },
{ type: 'html', subdir: 'report-html' },
]
},
...
...
});
}
And my webpack.
module.exports = {
devtool: 'inline-source-map',
mode: 'development',
target: 'node',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ['ts-loader', 'angular-router-loader', 'angular2-template-loader']
}
....
....
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'test')
}),
// Removes warnings regarding Critical dependency
new webpack.ContextReplacementPlugin(
/\#angular(\\|\/)core(\\|\/)f?esm5/, path.join(__dirname, './src')
)
],
node: {
console: false,
global: true,
process: true,
Buffer: false,
setImmediate: false
}
}
The problem is after i run my test, my coverage covers the bundled node_modules. The file coverage endup being hude running in MBytes and my coverage low. Pls how do i exclude the node_modules from my coverage? Any help is appreciated .
By default you shouldn't even need to mention node_modules in the exclude path. Try removing it and see if the coverage is corrected?
If not,
try adding this to the preprocessors:
'!node_modules/**/*.*': ['coverage']