Develop Reference

webpack duplicate work during serving files

I've just faced to unpredictable situation during using custom webpack config.
I will try to explain the problem.
This is my simple app (file index.js):
console.log('!!this', this);
This is my webpack config (file webpack.config.js):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `#import './src/constants/global';`,
},
},
],
},
{
test: /\.(png|svg|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: { name: 'img/[name].[ext]' },
},
'image-webpack-loader',
],
},
],
},
};
This is my npm script for launching the app (file package.json):
"scripts": {
"dev": "webpack serve --config webpack.config.js",
},
As a result I see the next picture - all code executes twice (index.js, VM787 index.js).
In addition to that, if I use data fetching callback in my app with this configuration, I will see two equal requests in the Network tab.
Who knows what is the reason for that and how to resolve it?
Thanks!

This might be result of StrictMode. It mounts, unmount and mount conponent again, to check if everything is running correctly. Try removing it from index.js (just to check). Mind that it's useful for its purpose, and it only has this behaviour in dev mode.

If you're importing JavaScript into an HTML file yourself, you'll need to disable injection in the HtmlWebpackPlugin:
new HtmlWebpackPlugin({
template: './public/index.html',
inject: false,
}),

Webpack is taking 30 seconds to compile

I'm using a webpack on the development, I'm not sure what is wrong with my webpack configuration as it is taking too much of time even if I make a single line of change in my code. When I start the app it takes 30 seconds to start and it continues to take the same time in all my subsequent changes.
Here is my webpack file
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
login: './js/login.js',
progress_page: './js/react_progress_bar.js',
home: './js/home.js',
new_design_landing: './js/design_landing.js',
onboarding_preview: './js/preview.js',
popup_message: './js/message.js'
},
output: {
filename: '[name].js',
//chunkFilename: 'modern_theme_[name].[hash].chunk.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:5050/'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
//modules: true,
modules: {
// CSS name which we want to keep we can also
// change it to something like this [name]-[local]--[hash:base64:5]
localIdentName: '[name]',
},
url: false
}
}
]
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
//modules: true,
modules: {
// CSS name which we want to keep we can also
// change it to something like this [name]-[local]--[hash:base64:5]
localIdentName: '[name]-[local]',
},
url: false
}
},
{
loader: 'sass-loader'
},
{
loader: 'sass-resources-loader',
options: {
resources: './scss/abstracts/variables.scss'
}
}
]
},
]
},
plugins: [
new webpack.DefinePlugin({
TRACKING_ID: "x"
NODE_ENV: JSON.stringify('production'),
SERVER_ADDRESS: JSON.stringify('http://localhost:5050/'),
WT_SITE: JSON.stringify('http://localhost:5050')
}),
new webpack.EnvironmentPlugin({
ASSETS_PATH: "http://localhost:5050/",
SERVER_ADDRESS: "http://localhost:5050/",
AUTO_LOGOUT_TIMER: 7180000,
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
watch: true,
watchOptions: {
poll: 500
},
optimization: {
minimize: false
},
mode: 'development',
devtool: false
};
Can you please help me point out what is wrong in this that it is taking 30 seconds for any change I make in the code.
React version used 16.8.6
webpack version 4.23.1
Here is how my package.json looks like

Try ignoring node_modules in your watchOptions:
watchOptions: {
ignored: /node_modules/
}
Also, polling is generally underperformant. Why do you need it ? Are you developing inside vagrant/docker or using a networked file system ?
Unrelated tangent: You may not want to set NODE_ENV: production for development, as it will suppress helpful warnings in many libraries like react, react-redux etc.

Deployment Problem with Webpack & Github Pages

I've got a little API App built with Webpack. To publish it on GitHub Pages I've installed the npm package gh-pages.
Everything works fine, the dist-folder is pushed correctly and when I open the live-version the index and scss files are displayed as well.
The problem now is that my bundle.js doesn't load. So the whole functionality is not active. Another thing I've discovered is that my media queries doesn't pop in as well.
Would be great if anyone could help me fixing that issue!
My Repository:
https://github.com/jeanmarc5592/Cocktail-API-Project
My webpack.config.js File:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const multi = require('multi-loader');
module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: {
loader: multi('style-loader!css-loader!sass-loader')
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
],
},
],
},
};

Webpack url() path resolution with css-loader

I am developing a site and using webpack for obvious reasons. The problem I am having is with path resolution for images which are imported into my project via my SCSS files. The issue is that css-loader isn't resolving the correct path. What seems to be happening is the following:
If I allow css-loader to handle the url() imports (leaving the url option to true) it rewrites the file path relative to the output directory specified in ExtractCSSChunksPlugin(), for example:
url('../img/an-image.jpg') should be rewritten to url('http://localhost:3000/assets/img/an-image.jpg'), however, what is actually being outputted is url('http://localhost:3000/assets/css/assets/img/an-image.jpg').
If I change it to false the correct path is resolved but the file-loader isn't able to find the images and then emit them.
I know that the images are being outputted when the css-loader is handling url resolution as I can see the emitted message when the bundle is compiled -- it does not fail.
I can also get the images to display if I manually add import calls to them in the JS entry point, set in the entry: field, and then call the absolute path in SCSS. But this is not desirable as it becomes tedious with the growing project.
I have tried to use resolve-url-loader and changing multiple settings but I just can't seem to get this to work.
I have also tried using the resolve: { alias: { Images: path.resolve(__dirname, 'src/assets/img/' } } option provided by webpack and then calling url('~Images/an-image.jpg') in my SCSS but it just reproduces the same results.
So, overall, my issue is that I need to be able to use relative paths in my SCSS and then have them rewritten to the correct path by one of my loaders.
My current webpack config (outputting the files with file loader but prepending assets/css/ to the start of the url) is as follows:
"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
}
}
},
{
test: /\.scss$/,
use: [
{
loader: ExtractCSSChunksPlugin.loader,
options: {
hot: true,
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.html$/,
use:['html-loader']
},
{
test:/\.(svg|jpg|png|gif)$/,
use: [{
loader:'file-loader',
options: {
publicPath: 'assets/img',
outputPath: 'assets/img',
name: '[name].[ext]',
esModule: false
}
}],
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractCSSChunksPlugin({
filename: 'assets/css/[name].css',
chunkFilename: 'assets/css/[id].css',
}),
]
});
Thank you in advance.

Ok, so it seems I have fixed the issue by resolving the publicPath set in the file loader config field: publicPath: path.resolve(__dirname, '/assets/img').
My config is now:
"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
}
}
},
{
test: /\.scss$/,
use: [
{
loader: ExtractCSSChunksPlugin.loader,
options: {
hot: true,
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.html$/,
use:['html-loader']
},
{
test:/\.(svg|jpg|png|gif)$/,
use: [{
loader:'file-loader',
options: {
publicPath: path.resolve(__dirname, '/assets/img'),
outputPath: 'assets/img',
name: '[name].[ext]',
esModule: false
}
}],
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractCSSChunksPlugin({
filename: 'assets/css/[name].css',
chunkFilename: 'assets/css/[id].css',
}),
]
});

I think adding url loader in the webpack configuration would help.
{
test: /\.(jpg|png)$/,
use: {
loader: "url-loader",
options: {
limit: 25000,
},
},
},

Moving from webpack v1 to v2

I'm trying to migrate my code from webpack v1 to v2 and add in the sass-loader, however I get the error
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
I'm very confused as to what the final file is supposed to look like:
let webpack = require('webpack');
let path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: [
'./src/index'
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}],
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
resolve: {
extensions: ['.js'],
options: {
enforceExtension: false
}
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true,
options: {
context: __dirname
}
})
]
};
At the moment the code is a mix of the two versions. I am using webpack version 2.2.1. Thanks.

There are several things you need to change:
Your test: /\.js?$/ and the corresponding loader and exclude should be another object inside the rules array:
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
},
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve.options does not exist, it is just resolve.enforceExtension directly:
resolve: {
extensions: ['.js'],
enforceExtension: false
},
And finally, although it's not an error but just a warning, new webpack.NoErrorsPlugin() is deprecated and has been replaced with:
new webpack.NoEmitOnErrorsPlugin()
Also if you haven't yet, you should have a look at the migration guide from the official docs https://webpack.js.org/guides/migrating/.