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
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
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.
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'
]
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"]
},
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
});
};