Develop Reference

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.

Exclude specific file from webpack bundle

In my React app I'm using Webpack. Here is my webpack.config:
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: "./Scripts/reactApp/index.jsx",
output: {
path: path.resolve(__dirname, "./Scripts/reactApp/build"),
filename: "react_bundle.js"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
},
{
test: /\.js$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
I'm trying to exclude from bundle he.translations.json
But webpack included it whatever.
Can you explain me what I do wrong?
Sorry in advance, I'm new in webpack.

You can just do (from webpack docs)
...
exclude: [/node_modules/, path.resolve(__dirname, 'Scripts/reactApp/translations/he.translations.json')],
...
There's no dot in the path and, of course, assuming you have the wepback config file in the proper place.

Webpack extract text plugin not generating a separate CSS file?

I have one src/styles/main.scss file which I want to convert to build/styles/main.css and then use it in index.html.
I have been trying to setup webpack with text extractor plugin but unable to achieve the final result.
This is my directory structure:
project
// build needs to be generated, as of now only js folder with index.js is generated
- build
- src
- styles
- main.scss
- components
- header.scss
- js
- stores
// some other files
- webpack.config.js
webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
const BUILD_DIR = path.resolve(__dirname, 'build/js');
const APP_DIR = path.resolve(__dirname, 'src');
const config = {
devtool: 'eval-source-map',
entry: {
"index": APP_DIR + '/js/index.jsx'
},
output: {
path: BUILD_DIR,
filename: '[name].js'
},
module: {
rules: [
{
test: /\.scss$/,
include: APP_DIR,
exclude: /node_modules/,
use: ExtractTextPlugin.extract(
'style-loader', // backup loader when not building .css file
'css-loader!sass-loader'
)
},
{
test: /\.(jsx|js)?/,
exclude: /node_modules/,
include: APP_DIR,
loader: 'babel-loader'
}
]
},
resolve: {
extensions: [".js", ".jsx"]
},
plugins: [
new ExtractTextPlugin("build/styles/main.css")
]
};
module.exports = config;

Webpack error: You may need an appropriate loader to handle this file type. | #charset "UTF-8";

I am trying to process a .scss file with Webpack 2.2.0 but instead of getting it injected into a style tag into my index.html file, I wanted to extract it into a .css file with ExtractTextPlugin.
The following is my webpack.config.js file:
// webpack.config.js
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].css');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
},
{
test: /\.(sass|scss)$/,
use: [
///////////////////////////////////////
// THIS WONT WORK AND CAUSES THE ERROR
///////////////////////////////////////
extractCSS.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader']
}),
/////////////
// THIS WORKS
/////////////
// 'style-loader', 'css-loader', 'sass-loader'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
},
plugins: [
extractCSS
]
}
Any help is appreciated. Thanks.

This is a bug currently in ETP. I believe my switching use to "loader" that this will solve your problem. Module parse failed error for SCSS file.