We Keep Coding

MiniCssExtractPlugin doesn't minify css code with webpack

Webpack version: 4.35.3
All compilation is successful.
My code after compilation in bundle.css is not minify.
I try to use minimize: true in text-webpack-plugin, but it not working.
For compile I use command in command line: webpack in my working directory
What am I doing wrong?
Why does MiniCssExtractPlugin not work, maybe because of resolve-url-loader?
My wepback config:
const AssetsWebpackPlugin = require('assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const { PATH } = require('../constants')
module.exports = {
mode: 'production',
output: {
path: PATH.publicFolder,
publicPath: '/',
filename: 'static/react/js/[name].[contenthash].js',
chunkFilename: 'static/react/js/[name].[contenthash].js',
sourceMapFilename: 'static/react/js/[name].[contenthash].js.map',
jsonpFunction: 'reactJsonpFunction',
},
performance: {
hints: false,
},
watch: false,
devtool: 'source-map',
plugins: [
new DefinePlugin({
NODE_ENV: JSON.stringify('production'),
}),
new AssetsWebpackPlugin({
filename: 'static/react/assets.json',
path: PATH.publicFolder,
}),
new MiniCssExtractPlugin({
filename: 'static/react/css/common.css',
}),
new FaviconsWebpackPlugin({
logo: PATH.favicon,
prefix: 'static/react/icons/',
emitStats: false,
statsFilename: 'iconstats.json',
background: '#fff',
persistentCache: true,
inject: true,
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: false,
twitter: false,
yandex: false,
windows: false,
},
}),
new FileManagerPlugin({
onStart: {
delete: ['../jrp-web-app/static/react/'],
},
onEnd: {
mkdir: ['../jrp-web-app/static/react/'],
copy: [
{
source: 'public/static/react',
destination: '../jrp-web-app/static/react',
},
],
},
}),
],
module: {
rules: [
{
test: /\.(png|jpg|gif|svg|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'static/react/images/[name]-[hash:8].[ext]',
},
},
],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: false,
},
},
'resolve-url-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: false,
config: {
path: PATH.postcssConfig,
},
},
},
],
},
],
},
}```

Vue's script and style 0 tab indent error with Prettier

I have got an indent error with prettier in .vue files.
How can I disable prettier's indent check in .vue files?
This is my eslint config
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
plugins: ['prettier'],
extends: [
'plugin:vue/vue3-essential',
'plugin:prettier/recommended',
'prettier',
'eslint:recommended',
],
parserOptions: {
parser: '#babel/eslint-parser',
},
rules: {
'vue/script-indent': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
overrides: [
{
files: ['*.vue'],
rules: {
indent: 'off',
},
},
],
};
This is my prettier config
.prettierrc.js
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
singleQuote: true,
semi: true,
};

I found an answer which works for my config.
Just need to add this code to rules of eslint's config.
'prettier/prettier': [
'error',
{
vueIndentScriptAndStyle: false,
},
],

Vuejs/Eslint/Prettier - Eslint complaining about tabwith and not correcting issues

Trying to get Eslint and Prettier to work on Vue projects. Having a couple of issues though.
For example, I have a rule setup is Eslint to add a space before function parens but it won't format:
Another issue is, I get a error about the tab width in the template section (but I've specified I want 4 spaces in Prettier). Any where would this rule be coming from? I haven't put 2 spaces for template section anywhere in the code:
As an FYI, I'm running Lunvarvim, which (not to blow too much smoke) is a great IDE which I'd like to continue to use if I can resolve this few pain points.
Here is my setup:
Eslint
module.exports = {
env: {
browser: true,
es6: true,
amd: true,
jquery: true,
jest: true,
'jest/globals': true,
},
extends: [
'plugin:jest/recommended',
'plugin:cypress/recommended',
'eslint:recommended',
'plugin:prettier/recommended',
'plugin:vue/recommended',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
$: true,
M: true,
Vue: true,
axios: true,
moment: true,
get: true,
process: true,
global: true,
accounting: true,
Qty: true,
Stripe: true,
Chart: true,
_: true,
},
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['vue'],
overrides: [
{
files: ['*.spec.js'],
rules: {
'no-unused-expressions': 0,
},
},
],
rules: {
'object-curly-spacing': ['error', 'always', { objectsInObjects: true }],
'space-in-parens': ['error', 'never'],
'array-bracket-spacing': ['error', 'never'],
'space-before-function-paren': ['error', 'always'],
'vue/component-name-in-template-casing': [
'error',
'kebab-case',
{
registeredComponentsOnly: true,
ignores: [],
},
],
'vue/no-unused-properties': [
'error',
{
groups: ['props', 'data', 'computed', 'methods'],
},
],
indent: ['error', 4],
'linebreak-style': 0,
'global-require': 0,
quotes: ['error', 'single'],
semi: ['error', 'always'],
'no-trailing-spaces': ['warn', { skipBlankLines: true }],
'eol-last': ['warn', 'always'],
'vue/html-self-closing': [
'error',
{
html: {
normal: 'any',
},
},
],
'vue/valid-v-slot': [
'error',
{
allowModifiers: true,
},
],
},
};
Prettier
{
"tabWidth": 4,
"singleQuote": true
}

Try to move the Prettier configuration into your package.json and make sure you have installed eslint-config-prettier

Attaching a function to window object in Webpack 5

I recently updated to Webpack 5 from Webpack 4, earlier I had a function on window object in index.js such that it looked something like
index.js
window.someFunction = function (...arguments) {
// function body
}
when this index.js gets bundled I can find this same function in common.bundle.js file.
and my index.html looks something like this
index.html
<head>
// rest of the head stuff
<script src="./dist/common.bundle.js"></script>
</head>
<body>
<script type="text/javascript">
someFunction(); // calling someFunction from the window object
// Also tried using window.someFunction() still doesn't work
</script>
</body>
In console I get ReferenceError: someFunction is not defined
and I am not able to print the function defination in chrome console when I type window.someFunction which was working in Webpack 4 as expected.
How do I attach my functions to window object in Webpack 5, and how do I go about accessing it?
webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = (env) => {
return {
mode: "development",
devtool: "source-map",
entry: {
common: "./index.js",
},
output: {
pathinfo: true,
path: path.join(__dirname, "dist"),
filename: "[name].bundle.js",
},
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development"),
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
babelrc: false,
presets: [
[
"#babel/env",
{
modules: false,
loose: true,
targets: {
browsers: [">0.25%", "not ie 11", "not op_mini all"],
},
},
],
"#babel/react",
],
plugins: [
[
"#babel/plugin-proposal-class-properties",
{
loose: true,
},
],
["#babel/plugin-transform-runtime"],
],
},
},
},
{
test: /\.css$/,
include: /node_modules/,
use: [{ loader: "style-loader" }, { loader: "css-loader" }],
},
],
},
resolve: {
extensions: [".js", ".jsx"],
modules: [path.resolve(__dirname, "node_modules")],
fallback: {
buffer: false,
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
},
},
optimization: {
// namedModules: true,
// namedChunks: true,
minimize: false,
// minimizer: [new TerserPlugin()],
runtimeChunk: "single",
moduleIds: "deterministic",
chunkIds: "deterministic",
nodeEnv: "development",
flagIncludedChunks: false,
concatenateModules: false,
splitChunks: {
hidePathInfo: false,
minSize: 20000,
maxAsyncRequests: Infinity,
maxInitialRequests: Infinity,
chunks: "all",
// maxSize: 0,
minChunks: 1,
automaticNameDelimiter: "~",
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "other.bundle",
chunks: "all",
minChunks: 2,
},
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
emitOnErrors: true,
checkWasmTypes: false,
removeAvailableModules: false,
},
performance: {
hints: "warning",
},
stats: {
all: false,
assets: true,
builtAt: true,
cachedAssets: false,
cachedModules: true,
chunkGroups: true,
colors: true,
env: true,
errors: true,
hash: true,
logging: "info",
timings: true,
modules: true,
outputPath: true,
performance: true,
errorsCount: true,
warnings: false,
warningsCount: true,
publicPath: true,
reasons: true,
ids: true,
version: true,
},
cache: {
type: "filesystem",
version: "1.0.0",
store: "pack",
name: "AppBuildCache",
maxMemoryGenerations: 1,
idleTimeout: 60000,
idleTimeoutAfterLargeChanges: 1000,
idleTimeoutForInitialStore: 0,
hashAlgorithm: "md4",
cacheLocation: path.resolve(__dirname, ".cache"),
},
externals: [
{
react: "React",
"react-dom": "ReactDOM",
jquery: "jQuery",
},
],
};
};

Try to add node.global: true to your config:
node: {
global: true
}

DoneDel0's comment was the correct solution for me.
node: {
global: true
}
The reasoning behind this is webpack 5 does no longer include a polyfills for node modules, so you have to manually set each.
https://webpack.js.org/configuration/node/#nodeglobal
However its good to note that the docs does suggest using ProvidePlugin instead of global.

Thank you for the answers, the issue turned out exactly to be due to missing polyfills for node core modules.
In my case the I had to provide polyfill for process using ProvidePlugin.
I did the same by adding below to my config
new webpack.ProvidePlugin({
process: "process/browser",
})

I added
node: {
global: true
}
but still the function is undefined in window object.

How can i improve code formatting using prettier configuration

I am using prettier with vs code with the option "editor.formatOnSave": true
Here is my .prettierrc config:
module.exports = {
semi: false,
overrides: [
{
files: ['*.js', '*.json', '*.css'],
options: {
trailingComma: 'es5',
tabWidth: 4,
semi: true,
singleQuote: true,
},
},
{
files: ['*.html'],
options: {},
},
],
};
is there a better way of doing that? and what should I put in the HTML option for a cleaner HTML code without having something like this:
<tr
ng-repeat="student in displayVars.studentsToShow track by student.id"
>
my HTML files should be in the one line something like that and I am not sure what's going on
<tr ng-repeat="student in displayVars.studentsToShow track by student.id">
by the way, I am using angulars 1 it's an old project to maintain.

we should add printWidth option to 1000
module.exports = {
semi: false,
overrides: [
{
files: ['*.js', '*.json', '*.css'],
options: {
trailingComma: 'es5',
tabWidth: 4,
semi: true,
singleQuote: true,
},
},
{
files: ['*.html'],
options: {
printWidth: 1000,
tabWidth: 4,
htmlWhitespaceSensitivity: 'ignore',
proseWrap: 'never',
},
},
],
};