Develop Reference

js and css file path are not loaded by webpack5 when used with pug

I'm using pug and scss with webpack 5. I have kept main.js and main.css both bundled by webpack but still the path is not resolved tried specific js path in src folder but same thing, they are not loading.
structure is like:
src:
index.js
style:
index.scss
views:
pages:
home.pug
base.pug
Please help it out
error picture
webpack.config.js:-
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const IS_DEVELOPMENT = 'dev'
module.exports = {
entry: [
path.resolve(__dirname, 'src/index.js'),
path.join(__dirname, 'styles/index.scss')
],
output:
{
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, 'static') }
]
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, './views/pages/home.pug'),
minify: true
}),
new MiniCSSExtractPlugin({
filename: IS_DEVELOPMENT ? '[name].css' : '[name].[contenthash].css',
chunkFilename: IS_DEVELOPMENT ? '[id].css' : '[id].[contenthash].css',
})
],
module:
{
rules:
[
{
test: /\.(html)$/,
use: ['html-loader']
},
{
test: /\.(pug)$/,
use: ['html-loader', 'pug-html-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
},
{
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use:
[
{
loader: MiniCSSExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader'
}, {
loader: 'resolve-url-loader'
}, {
loader: 'sass-loader'
}
]
},
{
test: /\.(gltf|glb)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/models/'
}
}
]
},
{
test: /\.(jpg|png|gif|svg)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/images/'
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/fonts/',
name: 'fonts/[name].[ext]',
mimetype: 'application/font-woff',
publicPath: '../'
}
}
]
},
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: [
'raw-loader',
'glslify-loader'
]
}
]
}
}

React Pdf pdf worker Path must be a string. Received undefined error

I am using react-pdf. My versions are; node version:8.9.4, react-pdf:^5.3.2, react version: 16.3.1 . I read documentation and created a component. (https://www.npmjs.com/package/react-pdf) Component works well with CDN solution but doesn't work with importing Document and Page from entry.webpack. I got this error: node_modules/react-pdf/node_modules/file-loader/dist/cjs.js!./node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js
Module build failed: TypeError: Path must be a string. Received undefined
My component is;
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'
render() {
<Document
file={pdf}
onLoadSuccess={this.onDocumentLoadSuccess}
options={options}
rotate={this.state.rotate}
className="document__page__main"
>
<Page
object-fit="fill"
scale={this.state.scale}
pageNumber={this.state.pageNumber}
width={600}
heigth={600}
/>
</Document>
}
My webpack is;
var webpack = require('webpack')
const { resolve } = require('path')
const ProgressPlugin = require('webpack/lib/ProgressPlugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var vendorArray = require('./vendors')
var MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
module.exports = {
devtool: 'source-map',
resolve: {
modules: [resolve(__dirname, 'src'), 'node_modules']
},
entry: {
main: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://0.0.0.0:3001',
'webpack/hot/only-dev-server',
'./src/main.js'
],
vendor: vendorArray
},
output: {
filename: '[name].[hash:8].js',
path: __dirname,
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
enforce: 'pre',
loader: './tools/proto-style-loader/index.js'
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
/*{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader'
}
]
},*/
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
url: false
}
},
{
loader: 'sass-loader',
options: {
url: false
}
}
]
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)([\?]?.*)$/,
loader: 'url-loader'
}
]
},
performance: {
maxAssetSize: 40000000,
maxEntrypointSize: 40000000,
hints: 'error'
},
plugins: [
new webpack.DefinePlugin({
APP_ENV: JSON.stringify('dev')
}),
new ProgressPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor']
}),
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new MergeJsonWebpackPlugin({
output: {
groupBy: [
{
pattern: './src/**/en-US.json',
fileName: 'en-US.json'
},
{
pattern: './src/**/tr-TR.json',
fileName: 'tr-TR.json'
}
]
},
globOptions: {
nosort: true
}
})
]
}

I changed react-pdf version 4.2.0. Because my webapck version is 3.8.1

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"
}
]
}
};

webpack bundling multiple css imports from js file

This is a part of my list of imports in my app.js file:
import "jsgrid"
import "./../node_modules/jsgrid/dist/jsgrid.css";
import "./../node_modules/jsgrid/dist/jsgrid-theme.css";
import "jstree";
import "./../node_modules/jstree/dist/themes/default/style.css";
and this is my webpack.config:
var path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var SplitChunksPlugin = require('webpack.optimization.splitChunks');
var LiveReloadPlugin = require('webpack-livereload-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
entry:{
app: [ './src/app.scss', 'jquery', './src/app.js']
},
devtool: 'inline-source-map',
externals: /^(tables.)/i,
module: {
rules:
[
{
test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
},
{
test: /\.(css)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle-css.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
],
},
{
test: /\.(scss)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle-sass.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
},
}],
},
{
test: /\.js$/,
include: /src/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
}],
},
/*optimization: {
splitChunks: {
chunks: "initial"
}
},*/
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
plugins: [
new ExtractTextPlugin('style.css'),
new LiveReloadPlugin({}),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
/*new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendor-manifest.json')
})*/
],
resolve: {
extensions: ['.js']
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
//ignored: /node_modules/
},
output: {
publicPath: './dist',
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
}
};
Now the problem is that webpack only seems to take into account the first .css file in my list of imports, ignoring the rest.
So as of now, webpack would only compile jsgrid.css into my bundle-css.css. But if I comment this line: import "./../node_modules/jsgrid/dist/jsgrid.css"; then webpack would only compile jsgrid.theme into my bundle.css.
I have been searching for the issue for quite some time now, but have not found anything.

Your config was totally wrong, see the changes i've done:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // <-------- run npm install --save-dev mini-css-extract-plugin
const LiveReloadPlugin = require('webpack-livereload-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
entry:{
app: './src/app.js'
},
devtool: 'inline-source-map',
externals: /^(tables.)/i,
module: {
rules:
[
{
test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader, // <---- added here
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
}
}
],
},
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader, // <--- added here
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
'sass-loader'
],
},
{
test: /\.js$/,
include: /src/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
}],
},
/*optimization: {
splitChunks: {
chunks: "initial"
}
},*/
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new LiveReloadPlugin({}),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
/*new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendor-manifest.json')
})*/
],
resolve: {
extensions: ['.js']
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
//ignored: /node_modules/
},
output: {
publicPath: './dist',
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
}
};

Not a webpack file pug compiler?

When running webpack-dev-server produces an error
Module build failed: TypeError: text.forEach is not a function
enter image description here
'use strict';
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: {
app: ['./client/main.js'],
index: ['./server/index.pug']
},
output: {
path: path.resolve(__dirname, "..", "public",'js'),
publicPath: "/js/",
filename: '[name].js'
},
module: {
rules: [
{
test: /\.pug$/,
loader: ExtractTextPlugin.extract( 'pug-loader')
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}]
})
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
resolve: {
extensions: [".vue", ".js", ".json",".pug",".html"],
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: [
new ExtractTextPlugin("[name].html"),
new ExtractTextPlugin("[name].css"),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "main",
minChunks: 2
})
],
}
Before that, I tried to do it through HtmlWebpackPlugin but there it returned plain text!