Sass loader hangs compilation - node.js

I am using webpack version 2.2.0 and sass-loader 4.4.1, and #angular/core is 2.4.4
when I run the command : npm run serve it make hang command prompt on 62% sometimes 61% or 63%.
Here below id dev dependencies of package.json:
"devDependencies": {
"#types/core-js": "0.9.35",
"#types/googlemaps": "3.26.2",
"#types/node": "6.0.60",
"#types/uglify-js": "2.0.27",
"angular2-template-loader": "0.4.0",
"awesome-typescript-loader": "2.2.4",
"copy-webpack-plugin": "3.0.1",
"css-loader": "0.25.0",
"exports-loader": "0.6.3",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.26.0",
"imports-loader": "0.6.5",
"json-loader": "0.5.4",
"metrojs": "0.9.77",
"napa": "2.3.0",
"node-sass": "4.2.0",
"raw-loader": "0.5.1",
"resolve-url-loader": "1.6.1",
"rimraf": "2.5.4",
"sass-loader": "4.1.1",
"sass-to-js": "1.3.0",
"source-map-loader": "0.1.6",
"style-loader": "0.13.1",
"ts-helpers": "1.1.2",
"typedoc": "0.4.5",
"typescript": "2.0.2",
"url-loader": "0.5.7",
"webpack": "2.2.0",
"webpack-dashboard": "0.2.1",
"webpack-dev-middleware": "1.9.0",
"webpack-dev-server": "2.2.0",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "2.4.0"
},
Here below is code of webpack.common.js file.
const webpack = require('webpack');
const helpers = require('./helpers');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const METADATA = {
title: 'Azimuth - Angular 2 Admin Template',
description: 'Admin template based on Angular 2, Bootstrap 4 and Webpack',
baseUrl: './'
};
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'main': './src/main.ts'
},
resolve:{
extensions: ['.js', '.ts', '.css', '.scss', '.json'],
modules: [helpers.root('src'), 'node_modules']
},
module: {
loaders:[
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular2-template-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.css$/,
loader: 'raw-loader'
},
{
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader'] // here if i comment sass-loader then worked.
},
{
test: /initial\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader!sass-loader?sourceMap'
})
},
{
test: /\.woff(2)?(\?v=.+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
},
{
test: /\.(ttf|eot|svg)(\?v=.+)?$/,
loader: 'file-loader?&name=fonts/[name].[ext]'
},
{
test: /bootstrap\/dist\/js\/umd\//,
loader: 'imports?jQuery=jquery'
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?limit=8192&name=assets/img/[name].[ext]'
}
]
},
plugins:[
new ExtractTextPlugin({filename: 'initial.css', allChunks: true}),
new ForkCheckerPlugin(),
new ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('src')
),
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
}),
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
new HtmlWebpackPlugin({
title: METADATA.title,
template: 'src/index.html',
chunksSortMode: 'dependency',
metadata: METADATA
}),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
'Tether': 'tether',
'window.Tether': 'tether',
Datamap:'datamaps',
Skycons: 'skycons/skycons',
Dropzone: 'dropzone',
moment: 'moment',
fullCalendar: 'fullcalendar'
})
],
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
}
If I do comment sass-loader in
loaders: ['raw-loader', 'sass-loader']
line and use the
loaders: ['raw-loader', 'css-loader', 'style-loader']
then it skips the hang but css does not appear.
I have tried with update all the modules in package.json file but nothing got help with that. I am not sure why it is getting hang. Is there any issue of compatibility in versions or else?

Related

Upraded Webpack 4 to 5 : Build stalls at 10% building 0/1 entries 1/1 dependencies 0/1 modules

I am upgrading my webpack from 4 to 5 , when i run webpack command
webpack --progress --config webpack.config.js
the progress stalls at
Build stalls at 10% building 0/1 entries 1/1 dependencies 0/1 modules.
This was working fine till i was using webpack 4. I have updated the rules as per the new format for respective headers. THer is no error or warning that printed on the console. It just stalls.
Please find my package.json file
{
"name": "deploy",
"version": "0.0.0",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"axios": "^0.21.1",
"backbone": "1.2.3",
"bootstrap": "^4.5.3",
"bootstrap-select": "^1.13.12",
"d3": "^3.3.11",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"file-saver": "1.3.3",
"formsy-react": "0.19.5",
"globalize": "^1.4.2",
"highcharts": "^9.1.0",
"intl-tel-input": "^17.0.12",
"jquery": "^3.5.1",
"jquery-contextmenu": "2.7.1",
"jquery-jsonview": "1.2.3",
"jstree": "3.3.7",
"leaflet": "1.3.4",
"less": "2.3.1",
"moment": "^2.29.1",
"noVNC": "git://github.com/novnc/noVNC.git#v0.6.2",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"rc-slider": "8.6.9",
"react": "^16.13.1",
"react-codemirror": "1.0.0",
"react-custom-scrollbars": "4.2.1",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "^16.13.1",
"react-dropzone": "3.13.4",
"react-json-editor-ajrm": "^2.5.13",
"react-modal": "^3.11.2",
"react-redux": "^7.2.1",
"react-table": "^7.7.0",
"react-tabs": "^3.1.1",
"react-tag-autocomplete": "^6.1.0",
"react-tagsinput": "^3.19.0",
"react-transition-group": "1.2.0",
"react-widgets": "^4.4.11",
"react-widgets-globalize": "^5.0.20",
"react-widgets-moment": "^4.0.27",
"recharts": "^2.0.0-beta.1",
"redux": "^4.0.5",
"redux-form": "^8.3.6",
"redux-thunk": "^2.3.0",
"save": "^2.4.0",
"text-security": "^1.2.0",
"why-did-you-update": "^1.0.8"
},
"browserslist": [
"defaults",
"ie >= 9",
"Firefox >= 45",
"Chrome >= 48",
"Safari >= 10"
],
"devDependencies": {
"#babel/cli": "7.14.3",
"#babel/core": "7.14.3",
"#babel/plugin-proposal-class-properties": "7.2.1",
"#babel/plugin-proposal-decorators": "7.1.6",
"#babel/plugin-proposal-object-rest-spread": "7.0.0",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"#babel/preset-stage-1": "7.0.0-beta.40",
"#storybook/react": "^6.2.9",
"babel-eslint": "^10.0.3",
"babel-jest": "^26.6.3",
"babel-loader": "8.2.2",
"babel-plugin-transform-decorators-legacy": "1.3.5",
"copy-webpack-plugin": "^9.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"dust-loader": "1.3.0",
"dustjs-helpers": "1.7.4",
"dustjs-linkedin": "^2.7.5",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^1.7.0",
"expose-loader": "0.7.5",
"file-loader": "2.0.0",
"jest": "^26.6.3",
"less-loader": "4.1.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "1.6.0",
"npm-run-all": "4.1.5",
"raw-text-loader": "0.1.1",
"replace-hash-in-file-webpack-plugin": "1.0.8",
"scriptjs": "2.5.9",
"style-loader": "0.23.1",
"unused-files-webpack-plugin": "^3.4.0",
"url-loader": "1.1.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
},
Here is the webpack file
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ReplaceHashInFileWebpackPlugin = require('replace-hash-in-file-webpack-plugin');
const brandingDefinePlugin = require('./configs/plugins');
const env = process.env.NODE_ENV;
const config = {
entry: [
"./src/main/webapp/app/scripts/index.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: env !== "development" ? '[name]-[hash].js' : '[name]-dev.js'
},
module: {
rules: [
{
test:/\.m?js$/,
loader: "babel-loader",
options:{
exclude: /(node_modules|bower_components)/,
compact: false
}
//query: {compact: false}
},
{
test: /\.dust$/,
use: [{
loader: "dust-loader",
options: {
rootDir: './src/main/webapp/app/scripts/templates'
}
}]
},
{
test: require.resolve('highcharts'),
use: [{
loader: 'expose-loader',
options: 'Highcharts'
}]
},
{
test: require.resolve('underscore'),
use: [{
loader: 'expose-loader',
options: '_'
}]
},
{
test: path.resolve(__dirname, './src/main/webapp/app/scripts/app'),
use: [{
loader: 'expose-loader',
options: 'app'
}]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
//importLoaders: 1,
sourceMap: env === 'development',
url: false,
//context: '../',
}
},
]
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: [{
loader: 'file-loader?name=../../images/[name].[ext]'
}]
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
use: [{
loader: 'url-loader?name=fonts/[name].[ext]'
}]
//loader: 'url-loader?name=fonts/[name].[ext]'
},
]
},
stats: {
colors: true,
errorDetails: true
},
externals: {
'jquery': 'jQuery'
},
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules', 'bower_components'],
descriptionFiles: ['package.json', 'bower.json'],
alias: {
'jquery-i18n': path.resolve(__dirname, "./src/main/webapp/app/scripts/vendor/jquery.i18n.properties-1.0.9"),
'jquery-ui': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery-ui'),
"bootstrap-datetimepicker": path.resolve(__dirname, "./src/main/webapp/app/scripts/vendor/bootstrap-datetimepicker.min"),
mousewheel: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.mousewheel'),
atmosphere: path.resolve(__dirname, './src/main/webapp/app/bower_components/jquery.atmosphere/jquery.atmosphere'),
x2js: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/xml2json.min'),
helpers: path.resolve(__dirname, './src/main/webapp/app/scripts/helpers'),
jscrollpane: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.jscrollpane'),
jqgridlocale: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/grid.locale-en'),
'jqgrid': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.jqGrid.js'),
idleTimer: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/idle-timer.min'),
'jquery-tag-it': path.resolve(__dirname,'./src/main/webapp/app/bower_components/jquery-tagit/js/tag-it'),
jsonview: path.resolve(__dirname, './node_modules/jquery-jsonview/dist/jquery.jsonview'),
gridster: path.resolve(__dirname, './src/main/webapp/app/bower_components/gridster/src/jquery.gridster.js'),
'jquery-ui-multiselect-widget': path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/jquery.multiselect'),
'file-saver': path.resolve(__dirname, './node_modules/file-saver/FileSaver.min'),
jqueryTimeDuration: path.resolve(__dirname, './src/main/webapp/app/bower_components/jquery-time-duration-picker/src/jquery-time-duration-picker'),
'jQuery-contextMenu': path.resolve(__dirname, './src/main/webapp/app/bower_components/jQuery-contextMenu/dist/jquery.contextMenu.js'),
applicationTemplates: path.resolve(__dirname, './src/main/webapp/app/scripts/applicationTemplates'),
dust: path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/dust'),
'dust.core': 'dustjs-linkedin',
'dust.parse': path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/parser'),
dustCompiler: path.resolve(__dirname, './node_modules/dustjs-linkedin/lib/compiler'),
dustHelpers: 'dustjs-helpers',
app: path.resolve(__dirname, './src/main/webapp/app/scripts/app'),
routes: path.resolve(__dirname, './src/main/webapp/app/scripts/routes'),
collections: path.resolve(__dirname, './src/main/webapp/app/scripts/collections'),
views: path.resolve(__dirname, './src/main/webapp/app/scripts/views'),
models: path.resolve(__dirname, './src/main/webapp/app/scripts/models'),
schemas: path.resolve(__dirname, './src/main/webapp/app/scripts/schemas'),
templates: path.resolve(__dirname, './src/main/webapp/app/scripts/templates'),
controllers: path.resolve(__dirname, './src/main/webapp/app/scripts/controllers'),
'custom-form-elements': path.resolve(__dirname, './src/main/webapp/app/scripts/helpers/custom-form-elements'),
js: path.resolve(__dirname, './src/main/webapp/app/js'),
bubble_chat: path.resolve(__dirname, './src/main/webapp/app/scripts/helpers/bubble_chat'),
leaflet: path.resolve(__dirname, './src/main/webapp/app/bower_components/leaflet/leaflet'),
MarkerCluster: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/MasterCluster-src'),
jstree: path.resolve(__dirname, './node_modules/jstree/dist/jstree.min'),
geosearch: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.control.geosearch'),
openstreetmap: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.geosearch.provider.openstreetmap'),
googleProvider: path.resolve(__dirname, './src/main/webapp/app/bower_components/L.GeoSearch/src/js/l.geosearch.provider.google'),
'intl-tel-input': path.resolve(__dirname, './node_modules/intl-tel-input/build/js/intlTelInput-jquery.min'),
adapter: path.resolve(__dirname, './src/main/webapp/app/scripts/adapter'),
next: path.resolve(__dirname, './src/main/webapp/app/scripts/next'),
spin: path.resolve(__dirname, './src/main/webapp/app/bower_components/spin/'),
'fileSaver': path.resolve(__dirname, './node_modules/file-saver/FileSaver'),
'vApiClient': path.resolve(__dirname, './src/main/webapp/app/api/vApiClient'),
vendorUtils: path.resolve(__dirname, './src/main/webapp/app/scripts/vendor/utils')
}
},
resolveLoader: {
alias: { "text": "raw-text-loader" }
},
mode: env,
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
context: __dirname
}
}),
new webpack.ProvidePlugin({
_: 'underscore',
dust: 'dustjs-linkedin',
jQuery: 'jquery',
$: 'jquery',
_ld:'lodash'
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
new MiniCssExtractPlugin({
filename: env !== "development" ? 'styles/css/main-[hash].css' : 'styles/css/main-dev.css'
}),
new ReplaceHashInFileWebpackPlugin([{
dir: 'build',
files: ['index.jsp'],
rules: [{
search: /\/main/ig,
replace: env !== "development" ? '/main-[hash]' : '/main-dev'
}]
}])
]
}
if (process.env.npm_config_branding === 'riverbed') {
console.log('******************** Branding : Riverbed *********************',
process.env.npm_config_branding);
console.log(JSON.stringify(brandingDefinePlugin));
config.plugins.push(brandingDefinePlugin.riverbed.oem);
} else {
console.log('******************** Branding : Versa *********************', process.env.npm_config_branding);
console.log(JSON.stringify(brandingDefinePlugin));
config.plugins.push(brandingDefinePlugin.versa.oem);
}
if (!process.env.NO_COPY) {
config.plugins.push(new CopyWebpackPlugin({patterns:[
{
from: 'src/main/webapp/app/mock/json/*.json',
to: 'mock/json',
toType: 'dir',
},
{
from: 'src/main/webapp/app/*.jsp',
toType: 'file',
toType: 'dir',
}, {
from: 'src/main/webapp/app/jsp',
to: 'jsp/',
},
{
from: 'src/main/webapp/app/scripts/vendor',
to: 'vendor/',
},
{
from: 'src/main/webapp/app/scripts/vendor/codemirror',
to: 'vendor/codemirror',
},
{
from: 'src/main/webapp/app/scripts/vendor/diff_match_patch',
to: 'vendor/diff_match_patch',
}, {
from: 'src/main/webapp/app/scripts/vendor/next',
to: 'vendor/next',
}, {
from: 'src/main/webapp/app/styles/',
to: 'styles/'
}, {
from: 'src/main/webapp/app/bower_components/',
to: 'bower_components/'
}, {
from: 'src/main/webapp/app/footerName.txt'
}, {
from: 'src/main/webapp/app/favicon.png'
}, {
from: 'src/main/webapp/app/favicon.ico'
}, {
from: 'src/main/webapp/app/404.html'
}, {
from: 'src/main/webapp/app/logoName.txt'
}, {
from: 'src/main/webapp/app/robots.txt'
}, {
from: 'src/main/webapp/app/favicon_original.png'
}, {
from: 'src/main/webapp/app/images/',
to: 'images/'
}, {
from: 'src/main/webapp/app/styles/img/',
to: 'styles/img'
}, {
from: 'node_modules/noVNC',
to: 'vendor/noVNC',
}, {
from: 'src/main/webapp/app/scripts/novnc',
to: 'novnc',
},
{
from: 'node_modules/bootstrap/dist/css',
to: 'styles/css/bootstrap/',
},
{
from: 'node_modules/bootstrap/dist/js',
to: 'bower_components/bootstrap/',
},
{
from: 'node_modules/jquery/dist',
to: 'bower_components/jquery/dist',
},
{
from: 'src/main/webapp/app/scripts/jspScriptHandlers',
to:"jspScriptHandlers"
}]}
))
}
module.exports = config;
Out put of running webpack
ERROR] [webpack.Progress] 10% building
[ERROR] [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules
[ERROR] (node:27426) ExperimentalWarning: queueMicrotask() is experimental.
[ERROR] (node:27426) [DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[2].use[0].options)
[ERROR] [webpack.Progress] 10% building import loader ./node_modules/babel-loader/lib/index.js
[ERROR] [webpack.Progress] 10% building 0/1 entries 1/1 dependencies 0/1 modules
Had the same problem and, surprisingly, I've found the resolve.alias option to be the culprit. Removing one particular item from there caused the build to succeed.

Webpack: Can't display SVG images with file-loader (svg parse error)

SVGs that I use using require doesn't get displayed.
In my terminal, svg assets gets emitted and paths were set properly in my html.
<img src="/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg">
However, the SVG won't display while other formats like jpg or png works. I tried opening the original svg file and it definitely works.
And when I inspected the emitted svg asset and load it in the browser like so: localhost:8080/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg, I get this parse error:
This is how I use the svg in my pug file
img(src=require('../../assets/img/brand-illustration.svg').default)
webpack config
module.exports = {
entry: {
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "../build"),
filename: "[name].bundle.js",
publicPath: '/'
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
sourceMap: true
}
}]
}, {
test: /\.pug$/,
use: ["pug-loader"]
},
{
test: /\.(png|svg|jpe?g|gif|webp)$/,
use: [
{
loader: "file-loader",
options: {
limit: 10000,
outputPath: 'images',
name: '[name].[hash].[ext]'
}
},
]
},
{
test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 10000,
name: '[name].[hash].[ext]',
outputPath: 'fonts'
}
}]
},
{
test: /\.html$/,
use: {
loader: "html-loader?interpolate",
options: {
attrs: ["img:src", ":data-src"],
minimize: true
}
}
}
]
},
plugins: [
// CleanWebpackPlugin will do some clean up/remove folder before build
// In this case, this plugin will remove 'dist' and 'build' folder before re-build again
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].[contenthash]_[id].css'
}),
new CleanWebpackPlugin(),
// The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, '..', '/src/index.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: path.join(__dirname, '..', '/src/about.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'works.html',
template: path.join(__dirname, '..', '/src/works.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
template: path.join(__dirname, '..', '/src/contact.pug'),
inject: true,
publicPath: '/'
}),
new HtmlWebpackPlugin({
filename: '404.html',
template: path.join(__dirname, '..', '/src/404.pug'),
inject: true,
publicPath: '/'
})
].concat(htmlPlugins)
};
devDependencies
"#babel/core": "^7.7.7",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.7.7",
"babel-loader": "^8.0.6",
"brotli-webpack-plugin": "^1.1.0",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.0.1",
"css-loader": "^3.4.1",
"cssnano": "^4.1.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"pug-html-loader": "^1.1.5",
"pug-loader": "^2.4.0",
"purgecss-webpack-plugin": "^1.6.0",
"resolve-url-loader": "^3.1.2",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.2",
"terser-webpack-plugin": "^2.3.1",
"url-loader": "^4.1.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^5.7.0"
Remove the file-loader usage and add type: 'asset/resource' in the Webpack config

How to use npm file in webpack version 4.42.0

I started the use the web pack version 4.42.0, I can build the web-pack and able to run it. But whenever I include below code. I get an error, Please would anyone can help how to use npm fs in web-pack
Index.js
var fs = require('fs');
console.log(fs.readFileSync());
and my webpack-config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
options: { minimize: true }
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.node$/,
use: 'node-loader'
}
],
},
plugins: [new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
},
)],
mode: 'development',
node: { fs: 'empty' },
target: "node"
};
I am facing the error
Uncaught TypeError: fs.readFileSync is not a function
After removing node and target from webpack-config.js
ERROR in ./src/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/nagaraj/gowork/src/github.com/webpack_tutor/src'
# ./src/index.js 1:9-22
package.json
"devDependencies": {
"#babel/core": "^7.8.7",
"#babel/preset-env": "^7.8.7",
"babel-loader": "^8.0.6",
"file-loader": "^5.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-loader": "^0.6.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"fs": "0.0.1-security",
"lodash-webpack-plugin": "^0.11.5",
"webpack-dev-server": "^3.10.3"
}

Unable to setup webpack svg-inline-loader correctly. Svg images don't appear

I want to load svg images, So I downloaded svg-inline-loader. and configured using this example: Webpack svg-inline-loader. After trying to load svg file I get this. Without using webpack svg-inline-loader loading svg files would give me an error. Any ideas how can I fix it?
HTML
<img src="./svg/facebook-square-brands.svg" alt="Facebook"/>
My Webpack config file.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:{
scripts: "./src/scripts/index.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.html$/,
use: [{ loader: "html-loader", options: { minimize: true } }]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: "url-loader",
options: {
name: "./img/[name].[ext]",
limit: 10000
}
},
{
loader: "img-loader",
}
]
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-inline-loader',
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
PackageJson dependacies:
"devDependencies": {
"#babel/core": "^7.2.0",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.1",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"img-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.2",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
I know it's over a year since the question is asked but i add an answer for future people landing here.
svg-inline-loader are suppose to be used to use svg inline as the file it self injected. What you want to accomplished is best to use either url-loader or svg-url-loader (https://www.npmjs.com/package/svg-url-loader) to convert svg to base64 so you can use it in src-attribute.
If you want to use both together you can combine it with following oneOf config:
{
test: /\.svg$/,
oneOf: [
{
include: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'svg-inline-loader'
},
{
exclude: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'url-loader'
}
]
}

Webpack 2 - create a Js file with all plugins

I have some issue to have a vendor.js file that will include all the plugins I used for my projet. I already read Managing jQuery plugin dependency in webpack but It seems the plugins I used are a little complex to be include.
Just to be clear, my app.js and my css are correctly builded butt not the vendor.js
Here is my package.json :
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env=dev --progress --watch --content-base src/app"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"postcss-cssnext": "^2.10.0",
"postcss-loader": "^2.0.5",
"postcss-modules-values": "^1.2.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"admin-lte": "git://github.com/almasaeed2010/AdminLTE.git#37c8bbb01998db487382e9d62cfb398511167f3a",
"bootstrap-daterangepicker": "git://github.com/dangrossman/bootstrap-daterangepicker.git#29bbf5a04df69fda363cedb534272ac344524e57",
"bootstrap-table": "^1.11.2",
"eonasdan-bootstrap-datetimepicker": "git://github.com/Eonasdan/bootstrap-datetimepicker.git#4.17.47",
"font-awesome": "^4.7.0",
"ionicons": "^3.0.0",
"jquery": "^3.2.1",
"jquery-confirm": "git://github.com/craftpip/jquery-confirm.git",
"lobibox": "git://github.com/arboshiki/lobibox.git",
"lodash": "^4.17.4",
"moment-timezone": "^0.5.13",
"parsleyjs": "^2.7.1",
"push.js": "0.0.13",
"socket.io-client": "^1.7.4",
"tableexport.jquery.plugin": "git://github.com/hhurz/tableExport.jquery.plugin.git"
}
}
Here is my webpack.config.json :
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssPlugins = [
require('postcss-cssnext')(),
require('postcss-modules-values')
];
const scssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
];
const postcssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } },
{ loader: 'postcss-loader', options: { plugins: [...postcssPlugins] } }
];
// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
entry: {
app: './app.js',
// if any on these are just for css remove them from here and require(with absolute path) them from app.js
vendor: [
'babel-polyfill',
'admin-lte',
'admin-lte/bootstrap/js/bootstrap.min.js',
'lobibox/dist/js/notifications.min.js',
'admin-lte/plugins/fastclick/fastclick.js',
'moment',
'moment/locale/fr.js',
'moment-timezone',
'eonasdan-bootstrap-datetimepicker',
'bootstrap-table',
'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js',
'parsleyjs',
'parsleyjs/dist/i18n/fr.js',
'bootstrap-daterangepicker',
'socket.io-client',
'jquery-confirm',
'push.js',
'lodash',
'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
'tableexport.jquery.plugin'
]
},
//devtool: 'eval', // for test in the browser
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')//,
//pathinfo: true
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.html$/,
use: ['raw-loader', 'html-minifier-loader'],
exclude: /node_modules/
}, {
test: /\.json$/,
use: 'json-loader',
exclude: /node_modules/
}, {
test: /\.(scss|sass)$/,
use: ExtractTextPlugin.extract({
fallback: scssLoader[0], // style-loader
use: scssLoader.slice(1) // [ 'css-loader', 'sass-loader' ]
})
},{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}, {
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
}, {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}],
},
plugins: [
new ExtractTextPlugin({
filename: 'app.bundle.css',
allChunks: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
};
My app.js :
console.log("coucou");
// css
require('admin-lte/dist/css/skins/skin-blue.min.css');
require('admin-lte/dist/css/AdminLTE.min.css');
require('jquery-confirm/dist/jquery-confirm.min.css');
require('bootstrap-table/dist/bootstrap-table.min.css');
require('bootstrap-daterangepicker/daterangepicker.css');
require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');
require('admin-lte/plugins/select2/select2.min.css');
require('lobibox/dist/css/lobibox.min.css');
require('ionicons/dist/css/ionicons.min.css');
require('font-awesome/css/font-awesome.min.css');
require('admin-lte/bootstrap/css/bootstrap.min.css');
Thanks to help me how to fix this issue

Resources