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,
},
},
},
],
},
],
},
}```

make a function globally available via webpack

I have a .ts file that contains a function, and I want to compile this file into .js file via webpack to be loaded in index.html.
I need this function to be globally available in index.html, or within a module
index.html
<script src="./myfile.js"></scrit>
<script>
console.log(myfunction);
// ----> error: myfunction is not defined
</scrit>
<script type="module">
import { myfunction } from './myfile'
console.log({myfunction})
// ----> error: requested module './myfile.js' does not provide an export named 'myfunction'
</script>
myfile.ts
export myfunction = function(){}
webpack.config
{
mode: 'development',
devtool: false,
target: [ 'web', 'es5' ],
profile: false,
resolve: {
roots: [Array],
extensions: [Array],
symlinks: false,
modules: [Array],
mainFields: [Array],
plugins: [Array],
alias: [Object]
},
resolveLoader: { symlinks: true, modules: [Array] },
context: '/home/sh_eldeeb_2010/#eng-dibo/dibo/projects/ngx-cms',
entry: {
main: [Array],
'polyfills-es5': [Array],
polyfills: [Array],
styles: [Array],
scripts: './scripts.ts'
},
output: {
clean: true,
path: './dist',
publicPath: '',
filename: '[name].js',
chunkFilename: '[name]-es2015.js',
crossOriginLoading: false,
trustedTypes: 'angular#bundler',
library: undefined,
libraryTarget: 'commonjs2'
},
watch: false,
watchOptions: { poll: undefined, ignored: '**/$_lazy_route_resources' },
performance: { hints: false },
ignoreWarnings: [
/System.import\(\) is deprecated and will be removed soon/i,
/Failed to parse source map from/,
/Add postcss as project dependency/
],
module: {
strictExportPresence: true,
rules: [Array],
noParse: /\/native-require.js$/
},
experiments: { syncWebAssembly: true, asyncWebAssembly: true },
cache: false,
optimization: {
minimizer: [Array],
moduleIds: 'deterministic',
chunkIds: 'deterministic',
emitOnErrors: false,
runtimeChunk: 'single',
splitChunks: [Object]
},
plugins: [
[ContextReplacementPlugin],
[DedupeModuleResolvePlugin],
[ProgressPlugin],
[LicenseWebpackPlugin],
[CommonJsUsageWarnPlugin],
[AnyComponentStyleBudgetChecker],
[Object],
[MiniCssExtractPlugin],
SuppressExtractedTextChunksWebpackPlugin {},
[NgBuildAnalyticsPlugin],
[AngularWebpackPlugin],
[FilterErrors]
],
node: false,
stats: {
all: false,
colors: true,
hash: true,
timings: true,
chunks: true,
builtAt: true,
warnings: true,
errors: true,
assets: true,
cachedAssets: true,
ids: true,
entrypoints: true
},
externals: []
},
entry: {
myfile: './myfile.ts'
}
}

How to use uglifyjs to minify and compress css/scss in webpack/vue cli?

I have vue application with the cli. I want to use uglifyjs plugin.
So I add this code to my vue.config.js:
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
},
}),
],
},
I want to compress all the css that exist in *.scss and *.vue files. How to configure UglifyJsPlugin to compress and minify? for example, I have this selector: .some-thing the output should be: .x.
Here what is not working:
app.vue
<template>
<div class="some">appp</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style lang="scss" scoped>
.some { border:1px solid red;}
</style>
I run this command (which vue cli build):
npm run build (for production).
My full vue.config.js:
const merge = require('lodash/merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "~#/sass/mixins.scss";
`,
},
},
},
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
},
}),
],
},
},
};
The css/app.css is with the following content:
.some[..] {border:1px solid red;}...
** Edit ** After #Tony Ngo answer:
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "~#/sass/mixins.scss";
`,
},
},
},
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null,
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
}),
],
},
plugins: [
new CompressionPlugin({
test: /\.(js|css)/,
}),
new UglifyJsPlugin(),
],
},
chainWebpack: (config) => {
// nothing here yet
},
};
Still .some is in my app.css bundle. I want to minify and compress so I expect to something like .x

You can view my full code here
Here is the base setup you will need to uglify your code
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CompressionPlugin({
test: /\.(js|css)/
}),
new UglifyJsPlugin(),
],
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}
};

Webpack 4 bundle optimisation, code splitting - React/Redux app

I'm trying to reduce the size of my bundle.js. Here is my webpack config for production:
module.exports = () => {
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js',
chunkFilename: '[name].js'
},
optimization: {
runtimeChunk: true,
splitChunks: {
chunks: 'all',
minSize: 50000,
maxSize: 250000,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10
},
}
},
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
parse: {
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
ascii_only: true,
},
},
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}]
},
plugins: [
new webpack.DefinePlugin({/*env variables*/}),
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
new HtmlWebpackPlugin({ template: 'index.ejs', filename: path.join(__dirname, 'public', 'index.html')}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
devtool: 'source-map'
};
};
My app is structured like a classic React/Redux app followed:
|-src
|-|-app.js
|-|-actions
|-|-components
|-|-helpers
|-|-routers
|-|-selectors
|-|-store
With this webpack config, I managed to extract the css out and split into chunks of maximum 250kb. I also reduced the size of moment.
After all this effort, my entrypoint is still a total of 583Kb.
What else I can do?
I tried lazy loading part of the application but it didn't work. So if you have example of lazy loading for a React app, that would be great.

I have webpack 6.0.1. Based on the documentation I use the following plugins:
webpack.optimize.ModuleConcatenationPlugin() - concatenate the scope
of all your modules into one closure and allow for your code to have
a faster execution time in the browser
webpack.HashedModuleIdsPlugin() - cause hashes to be based on the
relative path of the module, generating a four character string as
the module id
webpack.optimize.OccurrenceOrderPlugin() - vary the
distribution of the ids to get the smallest id length for often used
ids
webpack.NoEmitOnErrorsPlugin() - skip the emitting phase
whenever there are errors while compiling. This ensures that no
assets are emitted that include errors
I tested, use the following configuration ideas for webpack.config.js. You can test your configuration against these settings:
//webpack.config.js
module.exports = {
...
devtool: 'cheap-module-source-map',
...
plugins : [
...
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.HashedModuleIdsPlugin({
hashFunction: 'sha256',
hashDigest: 'hex',
hashDigestLength: 4
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
...
optimization: {
namedModules: false,
namedChunks: false,
nodeEnv: 'production',
flagIncludedChunks: true,
occurrenceOrder: true,
sideEffects: true,
usedExports: true,
concatenateModules: true,
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
},
minSize: 30000,
maxAsyncRequests: 5,
maxAsyncRequests: 3,
},
noEmitOnErrors: true,
minimize: true,
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
],
removeAvailableModules: true,
removeEmptyChunks: true,
mergeDuplicateChunks: true,
},
...
}

How to ignore directory in webpack, babel and webpack-dev-server?

I have preact project, it work fine, but webpack is rebuilding the project when I edit file api/index.php and fail when I didn't save the file in emacs because of .#index.php file.
How can I ignore api directory or only process files from app directory? I need to copy file from root directory so I can't use context because webpack don't see files like index.html or .htaccess that's inside root directory.
Here is my webpack config file:
module.exports = {
entry: {
app: path.resolve('./app') + '/app.jsx'
},
output: {
path: path.resolve('./dist'),
filename: "[name].js"
},
plugins: ([
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: isNodeModule
}),
new webpack.DefinePlugin({
PRODUCTION: ENV === 'production'
}),
new CopyWebpackPlugin([
{from: 'index.html'},
{from: '.htaccess'},
{from: 'config.json'},
{from: 'api', to: 'api'}
])
]).concat(ENV==='production' ? [
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false
},
compress: {
unsafe_comps: true,
properties: true,
keep_fargs: false,
pure_getters: true,
collapse_vars: true,
unsafe: true,
warnings: false,
screw_ie8: true,
sequences: true,
dead_code: true,
drop_debugger: true,
comparisons: true,
conditionals: true,
evaluate: true,
booleans: true,
loops: true,
unused: true,
hoist_funs: true,
if_return: true,
join_vars: true,
cascade: true,
drop_console: true
}
})
] : []),
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['.jsx', '.js', '.json']
},
devServer: {
historyApiFallback: true,
open: true
}
};
EDIT: it seems that this in not related to dev-server because I can't run webpack too, when I have unsaved file in Emacs.