How to exclude specific files from vue-cli-3 build? - optimization

Current configuration of project is:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const UglifyJsPlugin = require("uglify-webpack-plugin");
module.exports = {
transpileDependencies: ["vuex-persist", "vuex-persistedstate"],
exclude: [
/w*worker.js\w*/g
],
configureWebpack: {
devtool: false,
optimization: {
splitChunks: {
minSize: 10000,
maxSize: 250000,
},
nodeEnv: "production",
minimize: true,
minimizer: [
new UglifyJsPlugin({
extractComments: 'false',
parallel: true,
}),
],
removeEmptyChunks: true,
removeAvailableModules: true,
mergeDuplicateChunks: true
},
plugins: [
new MonacoWebpackPlugin({
languages: ['javascript', 'css', 'html', 'typescript', 'json']
})
]
},
};
So, the problem was that vue parse the language worker files of the monaco-editor module. If I remove optimization options, in output I obtain the following not parsed files (worker.js)
But if I keep this optimization options, as a result, the following error occurs in the console
So the question is, how do I exclude this worker files from parsing?
Thank you in advance!

Related

Webpack 5 splitChunks maxSize not working

I am maintaining a VueJS project with Webpack 5. The built files are too large, especially those vendor files so I decided to use splitChunks to split large files into smaller files. My condition to split a file is if the file is bigger than 200kb, it will be split. However, my vendor file still remains nearly 2 Mb. This is my webpack configuration:
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: (config) => ({
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
minify: TerserPlugin.swcMinify,
parallel: true,
terserOptions: {
compress: true,
},
}),
],
splitChunks: {
enforceSizeThreshold: 500000,
cacheGroups: {
vendor: {
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
minSize: 0,
maxSize: 500000,
},
},
},
},
plugins: [
new ModuleFederationPlugin({
name: 'Test Module',
filename: 'testEntry.js',
exposes: {
'./Main': './src/bootstrap',
},
}),
new webpack.DefinePlugin(clientEnv),
],
}),
publicPath: 'auto',
devServer: {
port: process.env.APP_DEV_PORT,
historyApiFallback: true,
},
});
Before using splitChunks, my largest vendor file is 2.2 Mb. After using splitChunks, it's 2.0 Mb, still far bigger than the maxSize

Terser Plugin doesnt run with Vue CLI 5 on vue build

I am trying to create a production build with the following configureWebpack but Terser doesnt run during build.
Code is not minimized or uglified. Ialso tried hidden-source-map
Using "terser-webpack-plugin": "^5.3.3" with #vue/cli#5.0.7
isProd is correctly set to true.
const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
publicPath: '/',
devServer: {
host: 'staging-beta.myDomain.com',
port: 9000,
allowedHosts: 'all',
},
transpileDependencies: ['vuetify'],
chainWebpack: (config) => {
// reducted code
},
configureWebpack: {
devtool: 'source-map',
optimization: {
minimize: isProd,
minimizer: isProd
? [
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
]
: [],
},
},
};
The correct setup is:
module.exports = defineConfig({
terser: {
minify: 'uglifyJs',
terserOptions: {
compress: {
drop_console: true,
},
},
},
})
You also need to npm install uglify-js
comments under output is deprecated.

NUXT Duplicating Styles

Within my NUXT project it seems that CSS is being duplicated, not only on individual components, but when compiled duplicates styles from my nuxt.config.js - styleResources -> scss into the head tag.
This seems to be a problem for me pre NUXT 2.0 as well as post (current ver: 2.8.1). I've tried a bunch of things on build but I must be missing something...
My config for the global styles:
module.exports = {
...
styleResources: {
scss: [
'~/styles/variables.scss',
'~/styles/normalize.scss',
'~/styles/forms.scss',
'~/styles/mixins.scss',
'~/styles/type.scss',
'~/styles/buttons.scss',
'~/styles/font.scss',
'~/styles/loader.scss'
],
},
build: {
path: '',
parallel: true,
cache: true,
optimization: {
minimize: true,
runtimeChunk: true,
concatenateModules: true,
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 20,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
// extractCSS: true,
optimizeCSS: true,
publicPath: process.env.CDN_URL || '',
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
// loader: 'pug-plain-loader',
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
plugins: [
new webpack.ProvidePlugin({
mapboxgl: 'mapbox-gl'
})
]
}
...
}
!https://i.imgur.com/Uls5Kbl.png
!https://i.imgur.com/gcGR0La.png
The end goal is to obviously not have duplicate styles.
nuxt-styleResources module is only meant to share scss variables and mixins across your components. You shouldn't specify any styles there, use css field instead:
styleResources: {
scss: [
'~/styles/variables.scss',
'~/styles/mixins.scss',
],
},
css: [
'~/styles/normalize.scss',
'~/styles/forms.scss',
'~/styles/type.scss',
'~/styles/buttons.scss',
'~/styles/font.scss',
'~/styles/loader.scss'
]

Syntax error when testing React component Jasmine and Webpack

I keep getting an error when trying to run a simple test using React, Karma, Jasmine and Webpack. The error is ' Uncaught SyntaxError: Unexpected token < ', I think my jsx isn't being processed to js, but I don't know why that is happening as I understand webpack should handle that using the babel loader. If anyone can provide advice I would be grateful
Here are my files
karma.conf.js
var webpack = require("webpack"),
path = require("path");
// Karma configuration
module.exports = function(config) {
config.set({
basePath: "",
frameworks: ["jasmine"],
files: [
"../test/!**!/!*.test.js"
],
preprocessors: {
"./test/!**!/!*.test.js": ["webpack"]
},
webpack: {
module: {
loaders: [
{
test: /\.jsx?$/i,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{ test: /\.less$/, loader: "style!css!less" }
]
},
},
plugins: [
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
])
],
resolve: {
root: __dirname,
extensions: [
'',
'.json',
'.js',
'.jsx'
]
}
},
webpackMiddleware: {
noInfo: true
},
plugins: [
require("karma-webpack"),
require("karma-jasmine"),
require("karma-chrome-launcher")
],
reporters: ["dots"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["Chrome"],
singleRun: false
});
};
my test file example.test.js
var Comp = require('../../../js/common/components/MyComp.jsx'),
React = require('react'),
TestUtils = React.addons.TestUtils;
describe("Component Test", function() {
it("renders an h1", function () {
var component = TestUtils.renderIntoDocument(
<Comp/> // syntax error here
);
var h2 = TestUtils.findRenderedDOMComponentWithTag(
component, 'h2'
);
expect(h1).toExist();
});
});
So the syntax error happens at < Comp... . Thanks!
Apologise it was an error in setting the correct path to the test file.
files: [
"../test/**/*.test.js"
],
preprocessors: {
"../test/**/*.test.js": ["webpack"]
},

karma config with browserify/babel

I have a karma conf that I try to make work with babel/browserify. It looks like this:
module.exports = function(config) {
config.set({
browsers: ['Chrome'],
frameworks: ['jasmine'],
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-babel-preprocessor',
'karma-browserify'
],
preprocessors: {
'../src/**/*.js': ['babel', 'browserify'],
'unit/*.spec.js': ['babel', 'browserify']
},
files: [
'../src/**/*.js',
'unit/*.spec.js'
],
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline'
},
filename: function (file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function (file) {
return file.originalPath;
}
}
});
};
Every time I run this configuration through gulp babel preprocessor returns the following error:
ERROR [preprocessor.babel]: Cannot read property 'bundleFile' of undefined
Try adding 'browserify' to 'frameworks', like this:
frameworks: ['browserify', 'jasmine']
I had the same error, fixed by doing this. Here's my working karma config
module.exports = function (config) {
config.set({
browsers: ['Chrome'],
singleRun: true,
frameworks: ['browserify', 'mocha'],
reporters: ['dots'],
files: ['./*test.js'],
preprocessors: {
'*.js': ['browserify']
},
logLevel: 'LOG_DEBUG',
browserify: {
debug: true,
transform: [ ['babelify', {presets: ['es2015', "react"]} ] ]
}
});
};
The fixed config file:
module.exports = function(config) {
config.set({
browsers: ['Chrome'],
frameworks: ['jasmine', 'browserify'],
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-babel-preprocessor',
'karma-browserify'
],
preprocessors: {
'../src/js/app.js': ['browserify'],
'../src/js/login/login-ctrl.js': ['browserify'],
'./unit/*.spec.js': ['browserify']
},
files: [
'../../node_modules/angular/angular.js',
'../../node_modules/angular-mocks/angular-mocks.js',
'../src/js/app.js',
'../dist/js/partials/templates-all.js',
'../src/js/login/login-ctrl.js',
'unit/*.spec.js'
],
browserify: {
debug: true,
transform: [
['babelify']
]
},
singleRun: false,
reporters: ['progress'],
colors: true
});
};