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,
}),

React native web storybook react-native-vector-icons problem icon

I'm developing a react native component on storybook, which uses react-native-paper and react-native-vector-icons.
The problem is that I can't see the icons, I tried to follow the guide on react-native-vector-icons, this: webpack
Below is the webpack, but I didn't quite understand how to use the second part of the code suggested in the guide, where and how I should use it.
Can anyone help me out?
webpack:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
filename: 'index.html',
inject: 'body',
})
module.exports = {
entry: path.join(__dirname, 'index.web.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/build'),
},
resolve: {
alias: {
'react-native$': 'react-native-web',
'#storybook/react-native': '#storybook/react',
'styled-components/native': 'styled-components',
},
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: 'babel-loader',
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,
presets: [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-flow',
'#babel/preset-typescript',
{
plugins: ['#babel/plugin-proposal-class-properties', '#babel/plugin-proposal-object-rest-spread'],
},
],
},
},
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader',
},
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
},
],
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
},
}

The reason for your problem could be that your webpack.config.js is located in the folder .storybook.
So you have to change the path for loading the react-native-vector-icons and add ../ before node_modules, because of the folder structure.
...
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
// add .. to the path for node_modules
include: path.resolve(__dirname, '../node_modules/react-native-vector-icons'),
},
...
An similar issue has been described and solved here: React Native Vector Icons don't load on react-native-web storybook

Can webpack change the source of assets?

Below is my webpack.config.js. I'm working on a phaser game with a restAPI. My assets are in a folder off the root. My problem is I compiled with webpack and it changed the code in the boot scene of phaser to look for my assets in 'build/assets'. There is no such folder, so in the browser it's giving me the 404 not found errors. Is there a way to prevent this in the webpack.config? Or should I just copy the assets folder inside the build folder?
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build/',
filename: 'project.bundle.js',
},
module: {
rules: [
{
test: /\.m?js$/,
use: { loader: 'babel-loader' },
exclude: /node_modules/,
},
{
test: [/\.vert$/, /\.frag$/],
use: 'raw-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true),
}),
],
};

Webpack and Phaser 3 configuration

I'm trying to create a game using phaser 3 from a book tutorial and I decided to include webpack for learning purposes. I'm just in the initial stage of the game creation but when I ran the npm start script I got many errors that I fixed one by one. I don't have more errors but when running the scrip I got a blank page and nothing in being created in my dist folder. This is my webpack.config.js file content:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// https://webpack.js.org/concepts/entry-points/#multi-page-application
entry: ['babel-polyfill', './src/index.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// https://webpack.js.org/configuration/dev-server/
devServer: {
contentBase: './dist',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src/'),
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
],
},
],
},
// https://webpack.js.org/concepts/plugins/
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/assets', '**', '*'),
to: path.resolve(__dirname, 'dist'),
},
],
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
}),
new webpack.DefinePlugin({
'typeof CANVAS_RENDERER': JSON.stringify(true),
'typeof WEBGL_RENDERER': JSON.stringify(true),
}),
],
};
And the rest of the files are located in my repo, feel free to check it out. Thank you in advance for any assistance.

change line in CopyWebpackPlugin
from from: path.resolve(__dirname, 'src/assets', '**', '*'),
to from: 'src/assets',
then npm run build

I solve the problem by creating a base and prod webpack files for better code readability and also importing every image that I need for the game in every scene. The most challenging part was the prod.js file because I was able to render images using npm start but not npm run build.

Unable to load styles using MiniCssExtractPlugin in Webpack 4 for Wordpress

I'm using Webpack 4 for Wordpress theme development. I have configured my webpack.config.js to extract css from js files and load them in separate files. But the styles are not getting loaded, either as or as separate css file.
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
context: __dirname,
entry: {
userSide: "./js/public.js",
adminSide: "./js/admin.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
mode: "development",
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: [
{
loader: "file-loader",
options: {
outputPath: "dist/images",
name: "[name].[ext]"
}
}
]
},
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
})
]
};
The css files are being created in the local directory whenever I run npm run dev but not showing changes in the website.
Please help

This is how I config my webpack
You can use my setting to see if it work for you
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
Add to plugins section:
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
And rules section
{
"test":"/\\.scss$/",
"use":[
"style-loader",
"MiniCssExtractPlugin.loader",
{
"loader":"css-loader",
"options":{
"minimize":true,
"sourceMap":true
}
},
{
"loader":"sass-loader"
}
]
},
Also you may need to inject css to your html using HTML Webpack plugin