Upgrade to webpack 5 optimization.splitchunk.cacheGroups configuration changes - javascript

I am upgrading my react project to webpack 5 and I came accross this warning at webpack documentation
My current configuration of webpack:
optimization: {
usedExports: true,
minimizer: [
new TerserPlugin({
parallel: 4,
}),
new CssMinimizerPlugin()
],
splitChunks: {
name: false,
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: `vendor.${config.name}`,
test: config.vendor,
chunks: 'initial',
},
default: {
minChunks: 2,
reuseExistingChunk: true,
minSize: 100000,
},
}
},
},
What changes do I need to make here for the above warning?

Related

webpack 5 error: Uncaught TypeError: Cannot set properties of undefined (setting './src/style.css')

I started building a project collector using Webpack 5 and I ran into a strange error. When I first run everything works without error, but after updating the styles I get an error even though the new styles are being applied. I found no errors in webpack.conf.js
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;
module.exports = {
mode: 'development',
entry: {
app: './src/index.js',
},
output: {
clean: true,
filename: 'main.js',
path: path.resolve(__dirname, 'build'),
},
devtool: 'inline-source-map',
devServer: {
static: './build',
hot: true,
port: 9000,
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
],
}
]
},
optimization: {
minimize: isProd,
splitChunks: {
chunks: 'async',
minSize: 20000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
};
link to full repository code https://github.com/likeavenus/webpack-build-2021
Just slightly simplify a styles import:
before: import css from "./style.scss";.
after: import "./style.scss";
import "./style.scss";
import some from './some.js';
some();
if (module.hot) {
module.hot.accept();
}
Found an error in my html, I connected the script to the document once again

How to separate out webpack-dev-server from my splitChunks in Webpack?

I am trying to get multiple entrypoints working with webpackDevServer.
One entrypoint requires my entire node_modules folder. The other requires only a single file, with a single console.log in it (the entrypoint file).
For some reason, my single file with a single console.log won't run. See this question as well.
I was testing this setup in WebpackDevServer, so I suspected that all files needed at least WebpackDevServer to function, maybe. So, I changed my optimization.splitChunks to look like this, based off the example on the webpack docs:
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
},
vendor: {
test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
name: 'webpack',
chunks: 'all',
}
}
},
},
I expect there to be a "vendor" bundle and a "webpack" bundle. There is only "vendor" (and my entrypoints):
app.js 6.92 MiB app [emitted] app
resetPassword.js 35.2 KiB resetPassword [emitted] resetPassword
vendor.js 14.4 MiB vendor [emitted] vendor
How can I get webpack-dev-server into its own bundle, which I can then include into HtmlWebpackPlugin, to test to see if that (or other node_modules) are what's needed to run my console.log?
Webpack config
module.exports = {
entry: {
app: './public/js/ide.js',
resetPassword: './public/js/reset_password.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: '/'
},
...
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
},
vendor: {
test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
name: 'webpack',
chunks: 'all',
}
}
},
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'public/html/ide.html',
inject: true,
chunks: ['app', 'vendor']
}),
new HtmlWebpackPlugin({
filename: 'reset_password.html',
template: 'public/html/reset_password.html',
inject: true,
chunks: ['resetPassword'] // this does not work
//chunks: ['resetPassword', 'vendor'] //this works
}),
],
}
reset_password.js
console.log('hello')
webpack dev server config
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST,
port: PORT,
open: config.dev.autoOpenBrowser,
overlay: false,
publicPath: '/',
contentBase: [
path.join(__dirname, "../../public"),
path.join(__dirname, "../../public/js")],
watchOptions: {
poll: config.dev.poll,
},
disableHostCheck: true,
https: true,
noInfo: false,
},
Add a priority attribute to each of the chunks. From the docs.
splitChunks.cacheGroups.priority
number
A module can belong to multiple cache groups. The optimization will prefer the cache group with a higher priority. The default groups have a negative priority to allow custom groups to take higher priority (default value is 0 for custom groups).
So your code would be something like this. Note that the priority is the highest number value, not ranking value.
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
priority: 1
},
vendor: {
test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
name: 'webpack',
chunks: 'all',
priority: 2
}
}
},
},

Exclude unused dynamic modules from bundle using react-loadable

I've got an issue with react-loadable where I've got a large list of components that may or may not be rendered depending on user-generated content. I'm using a switch statement to render the correct ones.
A (simplified) list of user-generated content might look like this:
const content = ['Paragraph', 'Image', 'Paragraph', 'Canvas'];
Now, what I want to do is have ONLY the components that are used enter the bundle. Instead, ALL of them that get included in the following switch case are in the bundle. Why?
const collection = (name) => {
switch(name) {
case 'Paragraph':
return Loadable({
loader: () => import('dynamic-paragraph-component'),
loading(){ return null }
})
case 'Video':
return Loadable({
loader: () => import('dynamic-video-component'),
loading() { return null }
})
// etc
}
}
For example, dynamic-video-component ends up in the bundle even if it's not used. Is there a way to prevent this?
Current webpack setup with Webpack 4
//----------------------------------
//
// Bundler
//
//----------------------------------
import webpack from 'webpack';
import path from 'path';
import { ReactLoadablePlugin } from 'react-loadable/webpack';
module.exports = (files) => {
console.log(files);
return {
mode: 'production',
entry: './src/client/index.js',
output: {
filename: './main.pkgd.js',
chunkFilename: './[name].pkgd.js',
path: path.resolve(__dirname, 'tmp'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
[
'env',
{
modules: false,
targets: {
browsers: ['last 2 versions'],
},
},
],
'flow',
'react',
],
plugins: [
'transform-class-properties',
'syntax-dynamic-import',
'react-loadable/babel',
],
},
},
],
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
// vendor chunk
vendor: {
name: 'vendor',
chunks: 'all',
test: /node_modules/,
priority: 20,
reuseExistingChunk: true,
enforce: true,
},
common: {
name: 'main',
minChunks: 1,
chunks: 'initial',
priority: 10,
reuseExistingChunk: true,
enforce: true,
},
},
},
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: 'true',
env: {
NODE_ENV: JSON.stringify('production'),
},
}),
new ReactLoadablePlugin({
filename: './tmp/react-loadable.json',
}),
],
};
};
The way you have it set up looks correct, so I'd wager the problem is in your webpack.config.js file.
Assuming you are using Webpack 4, you need to reference the code-splitting docs.
Specifically, make sure you have configured the chunkFilename option. Also, you can add comment directives like /* webpackChunkName: "dynamic-video-component" */ for easier debugging.

Webpack4 codesplitting duplicate Error

module.exports = {
entry: {
vendors: "./src/vendor",
main: "./src/index.js",
auth: "./src/auth.js",
search: "./src/search.js",
cinema: "./src/cinema.js"
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
},
},
runtimeChunk: "single",
}
This is working good. But the chunks for cinema.js and main.js have duplicate entries. Please help me on how to avoid it.
I need to move duplicate code from cinema.js to main.js

ESLint failing on relative imports with webpack

I have been trying to get eslint working in an existing project, following the airbnb style guide. I have most of it working, but I can't get the relative imports that I use to pass linting. an example of one of my relative imports is:
import { actions as practiceActions } from 'reducers/practice';
which give the following linting error.
Unable to resolve path to module 'reducers/practice'
my .eslintrc.json is as follows:
{
"env": {
"browser": true,
"mocha": true
},
"extends": ["airbnb-base"],
"globals": {
"spy": true,
"stub": true,
"mount": true,
"shallow": true,
"chai": true,
"expect": true,
"sinon": true,
"getStoreAction": true,
"getMockStore": true,
"render": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"react"
],
"rules": {
"semi": 2,
"max-len": [1, 100, 2],
"indent": ["error", 4],
"import/extensions": ["warn", "never"],
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error"
},
"settings" : {
"import/extensions": ["js", "jsx", "png"],
"import/resolver": { //note that I have also tried just using "webpack" as the resolver, with the same outcome.
"node": {
"extensions": [".js",".jsx"]
}
},
"import/ignore": ["node_modules", ".(scss|less|css)$"]
}
}
My webpack config is quite long, but it's the default from create react app. There have been no manual changes to this.
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
{
test: /\.module.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[path]__[name]___[local]',
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
Everything else seems to work fine linting-wise, and the relative imports are working in the application. I just can't get them to be recognized by my linter.
I'd recommend taking a further look at the docs for eslint-plugin-imports webpack resolver. Specifically, try passing the location of your webpack config explicitly in .eslintrc.json:
{
// ...
"settings": {
"import/resolver": {
"webpack": {
"config": "my.webpack.config.js"
}
}
// ...
}
}
Hopefully that causes the resolver to pick up all resolve options in the webpack config.

Categories

Resources