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.

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

HtmlWebpackPlugin ignores filename

I'm trying out code/bundle splitting with webpack, however I ran in to an issue. HTMLWebpackPlugin is as far as I know supposed to dynamically insert script tags into an HTML file. This HTML file is by default index.html and it seems to work when I use the default. Because I use .NET with a _Layout.cshtml and Index.cshtml, it would like it to use the Index.cshtml.
HTMLWebpackPlugin seems to completely ignore what is in "filename", and generates an index.html:
new HtmlWebpackPlugin({
template: '../../Views/Shared/_Layout.cshtml',
filename: 'test-index.html' // Generates index.html, not test-index.html...
//filename: '../Views/Home/Index.cshtml' // Not working either. Generates index.html
})
webpack.common.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './ClientApp/polyfills.ts',
'vendor': './ClientApp/vendor.ts',
'app': './ClientApp/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('ClientApp', 'tsconfig.json') }
} , 'angular2-template-loader'
]
},
{
test: /\.html$/,
use: ['raw-loader']
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
include: helpers.root('ClientApp', 'app'),
use: ['to-string-loader', 'css-loader']
}
]
},
optimization:
{
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`;
},
},
}
}
},
plugins: [
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(#angular|fesm5)/,
helpers.root('ClientApp'),
{}
),
new webpack.BannerPlugin('© COPYRIGHT LIGHTHOUSE INTELLIGENCE ' + new Date().getFullYear()),
new HtmlWebpackPlugin({
template: '../../Views/Shared/_Layout.cshtml',
filename: 'test-index.html' // Generates index.html, not test-index.html...
//filename: '../Views/Home/Index.cshtml' // Not working either
})
]
};
webpack.dev.js:
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
mode: "development",
output: {
path: helpers.root('/wwwroot/dist'),
publicPath: '/wwwroot/dist/',
filename: '[name].js', //.[hash]
chunkFilename: '[id].js' //.chunk
},
plugins: [
new ExtractTextPlugin('[name].css'),
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});

I dont think you cant do that. Razor cshtml file need to have everything include in the view before you build and run your project so that it can build and transform cshtml to html.
htmlwebpackplugin only work with html so the only option you can choose is serve the html file in your .net core project

Location of the output file is determined by the output attribute of webpack.config.js (path: helpers.root('/wwwroot/dist')). So you have to specify only the file name for the filename attribute.

Webpack recompiles CSS but does not update

Using webpack 4.1.1 and webpack-dev-server I have the following webpack.dev.js file
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const src = path.resolve(__dirname, "../");
const build = path.resolve(__dirname, "../../build");
const components = path.resolve(__dirname, "../components");
const icons = path.resolve(__dirname, "../static/icons");
const images = path.resolve(__dirname, "../static/images");
const context = path.resolve(__dirname, 'src');
module.exports = {
mode: 'development',
entry: `${src}/index.js`,
output: {
filename: "bundle.js",
path: build
},
resolve: {
alias: {
components: components,
icons: icons,
images: images
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
path: build
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
],
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
plugins: [
"transform-react-jsx",
[
"react-css-modules",
{
context
}
]
]
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader',
options:{
modules: true
}
}
]},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
],
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
}
]
},
};
My issue is that when I update a CSS file, i watch the terminal, it says it compiles successfully, however I don't see the changes in the browser. Even when I navigate directly do localhost:8080/main.css, the old CSS file is still shown. The only way I can get the CSS to successfully recompile is to stop the dev server and start it all over again.
FWIW, here is my startup script:
$ ./node_modules/.bin/webpack-dev-server --config ./src/config/webpack.dev.js --content-base build/ --content-base src/static
Can someone tell me what I'm missing here?