Develop Reference

UglifyJsPlugin still Have problem with es6 using babel-preset-env in Webpack 4

I'm using the new version of Ecma Script preset in Webpack 4 but It still throws the error.
(currently, my bundle.js file size is about 5MB and it's so huge. In addition to UglifyJs, please let me know any other advice to decrease bundle size in Webpack 4 and ReactJs if you know)
Here is the error:
ERROR in bundle.js from UglifyJs
Unexpected token: keyword (const) [bundle.js:4981,0]
and here is my Webpack config:
{
...
...
module: {
rules: [
{
query: {
presets: ['react', 'env', 'stage-3'],
compact: false
},
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
loader: 'file-loader?name=./images/[name].[ext]'
},
{
test: /\.css$/,
exclude: /node_modules/,
include: [
resolve(__dirname, "not_exist_path")
],
loader: 'style-loader!css-loader'
},
]
},
...
...
optimization: {
minimizer: [new UglifyJsPlugin()]
},
}
What am I doing wrong? where is the problem?

Webpack extract text plugin unknow word export error

I'm having these errors when bundling my app and I can't figure why it's not working. I was using style-loader before and now I'm trying to implement extract-text plugin but got these errors :
The thing is all of this was actually working with style-loader, I'm just replacing style-loader with extract plugin, not changing any other loader or plugin, and I searched but didn't found any solution.
vuetify.css can be found here https://github.com/vuetifyjs/vuetify/tree/master/dist
here is my index.scss :
#import "default";
#import "list";
#import "page";
#import "toolbar";
And here is part where I'm importing the files :
import 'vuetify/dist/vuetify.min.css';
import './sass/index.scss';
Webpack module config :
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'css-loader?url=false!sass-loader',
},
extractCSS: true,
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader!css-loader'
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader?url=false!sass-loader',
fallback: 'style-loader!css-loader?url=false!sass-loader'
})
},
{
test: /\.(png|jpg|gif|svg|ttf|otf|eot|svg|woff(2)?)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
]
}
plugin config :
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
}
}),
new CleanWebpackPlugin([
getPath('../cordova/www/**'),
], {
root: getPath('..'),
}),
new CopyWebpackPlugin([{
from: getPath('../index.html'),
to: getPath('../cordova/www/index.html')
},
{
from: getPath('../assets'),
to: getPath('../cordova/www/assets/')
},
]),
new webpack.ProvidePlugin({
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true
}),
new ExtractTextPlugin('styles.css')
],

Change /\.css$/ rule to this one.
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}

Webpack Exclude a specific file

I have this code In my webpack.config.prod.js and I was wondering how do I exclude all json except one in a specific path like src/configs/configs
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
}
...

According to the Webpack documentation, you can do something like this.
exclude: {
test: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
exclude: [
'src/configs/configs/your.json'
]
}

To make exclude work I had to escape the dot in the specific file I wanted to exclude. Here's an example of excluding favicon.ico from a general rule and adding a special rule for it:
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /favicon\.ico$/,
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// A special rule for favicon.ico to place it into build root directory.
{
test: /favicon\.ico$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash:8]',
},
},

For Webpack 5:
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
type: 'asset/resource',
},
{
test: /favicon\.ico$/,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
},
},

Using loaders in webpack got error

What's wrong with my code below? I got error bundling less files, for example
ERROR in ./~/less-loader!./resources/assets/js/bundle/components/widget/clock.less
Below is my webpack.config.js
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
loaders: ['style-loader','less-loader']
}
]
}
I'm trying to implement hot reloading.

If you're using webpack v1:
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ["babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
loaders: ['style-loader','css-loader', 'less-loader']
}
]
}
or if you're using webpack v2:
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: ["babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
}
]
}

As your webpack is reaching the less-loader, I don't see any issue in configuration. Otherwise it prompts issue with webpack configuration.
Now you need to check your file here resources/assets/js/bundle/components/widget/clock.less
It is the place which is having issues.
If not please share complete error, this is just the first line of error.

Webpack autoprefix not working with suggested configuration

I'm trying to get sass compilation to work with webpack using sass-loader and autoprefixer and postcssloader. The sass compilation is working successfully. However following along with the documentation for autoprefixing isn't working:
Add PostCSS Loader to webpack.config.js. Put it before css-loader and style-loader. But after sass-loader, if you use it.
So with just sass working, I had
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
],
sassLoader: {
includePaths: [path.resolve(__dirname, "./build")]
}
But reading the above, it seems like what I need is something like this.
'loaders': [
{
test: /\.scss$/,
loaders: ["sass"]
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'postcss-loader'
]
},
{
test: /\.scss$/,
loaders: ["style", "css"]
}
],
sassLoader: {
includePaths: [path.resolve(__dirname, "./build")]
}
Also regarding:
Then create postcss.config.js:
I have made that file and put this inside
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}
However, I get the following error
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /path/to/scss/index.scss
and everything breaks. What's wrong with this configuration?

For my project, I arranged loaders in the following order to make it work with scss files.
loaders: [
'css-loader?modules&importLoaders=1',
'postcss-loader',
'sass-loader'
]

I found success with doing something like this:
module.exports = {
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
query: { presets: ["es2015", "stage-0", "react", "react-hmre" ]}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
}
]
},
postcss: function() {
return [
require('precss'),
require('autoprefixer')
];
}
};