Develop Reference

Webpack exclusion with seperate entry points not working with file exclusion

I have a webpack config file(version 5.28.0) that I am trying to alter, in order to create two versions of the user.js file that is generated. I'd like a user.js and legacy_user.js file to be generated. Both files I would like to be generated from the contents of the 'scripts/user' directory, with the exception of I'd like the user.js file to compile excluding the legacy_user.js file that is in the 'scripts/user' directory and the legacy_user.js file to compile excluding the user.js file that is in the 'scripts/user' directory. I have tried the below but the contents of the user.js file keeps overwriting the contents of the legacy_user.js file and they end up being identical:
module.exports = (options = {}) => {
return [
{
mode: options.production ? 'production' : 'development',
entry: {
app: path.resolve(__dirname, 'scripts/app'),
user: path.resolve(__dirname, 'scripts/user'),
'video/trim': path.resolve(__dirname, 'scripts/video/trim')
},
output: { path: path.resolve(__dirname, '../public_html/dist') },
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /legacy_user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
},
{
mode: options.production ? 'production' : 'development',
entry: {
legacy_user: path.resolve(__dirname, 'scripts/user')
},
output: {
path: path.resolve(__dirname, '../public_html/dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
}
]
}
Any help on this would be greatly appreciated!

Optimize bundle.js file size

Below is the webpack config code and it's size is around 6.2 MB. In production mode it looks more time load the signin page url and from second time onwards it looks good , the problem with first time and need suggestion to reduce the bundle.js file size
webpack.base.js
module.exports = {
//Running babel to every file
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] } }]
]
}
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.less$/,
use:[
{
loader: "style-loader"
},
{
loader: 'css-loader'
},
{
loader: "less-loader"
}
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg|otf)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
}//end module
}
webpack.client.js:
const config = {
entry: './src/client/client.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
}
};
module.exports = merge(baseConfig, config)
webpack.server.js:
const server_config = {
//letting webapck know that this bundle is created for node server.
target: 'node',
entry: './src/server/server.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
externals: [webpackNodeExternals()],
node:{
__dirname:false
}
};
module.exports = merge(baseConfig, server_config);

Here is how I optimize webpack. You can view my full config here
First you need to run webpack production mode when you want to build in production
webpack -p --mode=production
Below is minial config
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({ // minify js file
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new OptimizeCSSAssetsPlugin({ // minify css
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
})
]
},
plugins: [
new CompressionPlugin({ // gzip js and css
test: /\.(js|css)/
}),
new UglifyJsPlugin(), // uglify js
new WebpackShellPlugin({
onBuildStart: ['echo "Starting postcss command"'],
onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css'] // uglify css using postcss
})
],
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"
}
]
}
};

Config webpack 4 with Bootstrap 3

I just want to config Bootstrap with Webpack 4.
I use MiniCssExtractPlugin for loading css and sass.
Here is my Webpack config :
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url?limit=5000"
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
})
]
};
I just want to add bootstrap to and use it.
Here is my index.js
import 'bootstrap/dist/css/bootstrap.css'
import "./assets/main.scss"
console.log("Hello")
When I want to run this , i got en error :
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:5
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
> html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
# ./src/index.js 3:0-43
Is there any help ? appreciate it

Add this to your config.
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url?limit=5000"
}
]
},

Compiling SASS files in React component folders

I want to use sass stylesheets that are organized with each of my react components, like this:
components/
|- componentOne
|- componentOne.js
|- componentOne.scss
|- componentTwo
|- componentTwo.js
|- componentTwo.scss
|- componentThree
|- componentThree.js
|- componentThree.scss
Are there any webpack settings / tools that will automatically load and compile all .scss files in a certain directory?
EDIT:
So the below is the current webpack config that I am using (written from a previous developer). I added in the line line in entries of SRC_DIR + "/app/components/", so that extract-text-webpack-plugin will pick up all of the .scss files in the components directory. But when I try to run the build I get the following error message. What am I doing wrong? Thanks.
ERROR in multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css #trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Module not found: Error: Can't resolve '/Users/user123/dev/project/src/app/components/' in '/Users/user123/dev/project'
# multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css #trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Webpack config:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js",
SRC_DIR + "/app/assets/stylesheets/application.scss",
SRC_DIR + "/app/components/",
"font-awesome/scss/font-awesome.scss",
"react-datepicker/dist/react-datepicker.css",
"rc-time-picker/assets/index.css",
"react-circular-progressbar/dist/styles.css",
"#trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
],
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
plugins: [
new ExtractTextPlugin({
filename: "application.css",
allChunks: true
})
]
};
module.exports = config;

In order to compile your scss, webpack has to know about it. In order to let him know, you just import those scss files in your current component.
Now, what lasts you is to configure webpack. You are going to use sass-loader, css-loader and style-loader.
module.exports = {
entry: './src/',
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
This is the most basic config that can be done.
If you want to have your compiled css into files, just use Mini-css-extract-plugin

module: {
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.less$/,
loaders: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
},
},
},
resolve: {
extensions: [ '.css', '.scss'],
}

Vuejs / Webpack exclude json file from bundle

I have a no-sql database in the root of my project and I don't want webpack to include it in its bundle. Now I have to rebuild everytime the db gets updated. I'm using webpack 2.2.1. This is what I have:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './resources/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('resources'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('resources'),
'assets': resolve('resources/assets'),
'components': resolve('resources/components')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('resources'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('resources'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
I tried to exclude it by adding it to the externals like so
externals: ['./../db.json'],
Or adding a rule like so
{
test: /\.json$/,
exclude: resolve('db.json')
}

as long as you require()/import it, you will always have to re-build, because webpack will convert it into a new file, as a webpack module.
What you really have to do is load it via AJAX from the browser after your app has started, with your AJAX tool of choice.