Develop Reference

Cloudflare Deployment: Error: Cannot resolve module 'style-loader'

any idea how to fix this, the webpack config in the ckeditor folder is set like this:
const path = require("path");
const webpack = require("webpack");
const { bundler, styles } = require("#ckeditor/ckeditor5-dev-utils");
const CKEditorWebpackPlugin = require("#ckeditor/ckeditor5-dev-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
devtool: "source-map",
performance: { hints: false },
entry: path.resolve(__dirname, "src", "ckeditor.js"),
output: {
// The name under which the editor will be exported.
library: "CKSource",
path: path.resolve(__dirname, "build"),
filename: "ckeditor.js",
libraryTarget: "umd",
libraryExport: "default",
},
optimization: {
minimizer: [
(compiler)=>{
const TerserPlugin = require('terser-webpack-plugin');
new TerserPlugin({
terserOptions: {
compress: {},
}
}).apply(compiler);
}
],
},
plugins: [
new CKEditorWebpackPlugin({
// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
language: "en",
additionalLanguages: "all",
}),
new webpack.BannerPlugin({
banner: bundler.getLicenseBanner(),
raw: true,
}),
],
module: {
rules: [
{
test: /\.svg$/,
use: ["raw-loader"],
},
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options: {
injectType: "singletonStyleTag",
attributes: {
"data-cke": true,
},
},
},
{
loader: "css-loader",
},
{
loader: "postcss-loader",
options: {
postcssOptions: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("#ckeditor/ckeditor5-theme-lark"),
},
minify: true,
}),
},
},
],
},
],
},
};
I tried to delete package-lock.json and delete node_modules and reinstall everything, but it did not work.
Tried other solutions from other Stack overflow questions that had similar issues, nothing worked
this happens for ckeditor by the way.

Why isn't webpack retaining console.log statements?

I'm doing my first tests with webpack and experimenting with code splitting, and I simply wanted to log from my index.js file. It gets compiled, but it doesn't log nothing, both in development or in production mode. Files are compiled and loaded. Very strange. I'm sure I'm doing something wrong... Could you please point me in the right direction?
// index.js
import _ from 'lodash';
import Swiper from 'swiper';
import { Fancybox, Carousel, Panzoom } from "#fancyapps/ui";
function log(){
console.log('from index');
console.log(Swiper);
console.log(Fancybox, Carousel, Panzoom);
console.log(_);
}
log();
webpack config:
const path = require('path');
module.exports = {
//mode: 'development',
mode: 'production',
watch: true,
entry: {
index: './src/index.js',
//page_2: './src/page-2.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
optimization: {
splitChunks: {
cacheGroups: {
visuals: {
name: 'visuals',
chunks: 'all',
test: /[\\/]node_modules[\\/](swiper|#fancyapps\/ui|dom7|ssr-window)[\\/]/
},
lowdash: {
name: 'lowdash',
chunks: 'all',
test: /[\\/]node_modules[\\/]lodash[\\/]/
}
},
}
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ['#babel/preset-env'] }
}
} // babel
] // rules
} // module
};

My guess would the as part of the optimization that webpack does, it cleans out your console.logs.
You could try adding
optimization: {
minimize: false,
},
};
and see if that helps. Although I'm surprised it's doing it in dev mode as well.

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

Create vendor.bundle for each entry with webapack 4

I want to make vendor.bundle for each entry with webapack4.
example.
src/
pages/
home/
index.js
list/
index.js
After building.
dist/
pages/
home/
index.bundle.js
home.vendor.bundle.js
list/
index.bundle.js
list.vendor.bundle.js
How do I configure split chunks?
Current config.
const path = require('path')
module.exports = {
mode: 'development',
entry: {
'/pages/home/index': path.resolve(__direname, 'src', 'pages', 'home', 'index.js'),
'/pages/list/index': path.resolve(__direname, 'src', 'pages', 'list', 'index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
// I am troubled with the setting here.
optimization: {
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
enforce: true,
name: 'vendor'
},
}
}
},
}
I tried to handle name with a function instead of a string, but it did not work.
Thank you.

Solved this problem.
const path = require('path')
module.exports = {
mode: 'development',
entry: {
'/pages/home/index': path.resolve(__direname, 'src', 'pages', 'home', 'index.js'),
'/pages/list/index': path.resolve(__direname, 'src', 'pages', 'list', 'index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
optimization: {
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
cacheGroups: {
'top-vendor': {
test: /[\\/]node_modules[\\/]/,
chunks: chunk => chunk.name === '/pages/home/index',
enforce: true,
name: `${path.dirname('/pages/home/index')}/vendor`
},
'list-vendor': {
test: /[\\/]node_modules[\\/]/,
chunks: chunk => chunk.name === '/pages/list/index',
enforce: true,
name: `${path.dirname('/pages/list/index')}/vendor`
},
}
}
},
}

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.