I'm using Webpack for the first time. Currently everything is being served up quite nicely. My problem is when I'm trying to build a dist folder. Currently I get my index.html and bundle.js files but I can't figure out how to push my assets to the dist folder.
I have file-loader loaded up but it doesn't actually seem to do what I want it to and none of the google searches I've run are telling me what I need to know. Below is my config file. Can someone lead a horse to water? Also once I get it running do I need to import all of images to my React components?
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
{ test: /\.(png|jpe?g|svg|)$/, use: { loader: 'file-loader', options: }}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
};
Looks like I just needed to use Copy-Webpack-Plugin.
To copy all the assets from 'app/assets/' to 'dist/assets/' I just needed to do:
plugins: [
new CopyWebpackPlugin([
{ from: 'app/assets', to: 'assets' }
])
]
First install copy webpack plugin:
npm i copy-webpack-plugin
Then in the webpack.config.json:
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "src/public", to: "" } //to the dist root directory
],
}),
],
};
Related
I am trying to set up webpack so I can have it with wordpress. I have a file structure like the following:
-assets/
-img
-dist/
-src/
-js
index.js
-scss
webpack.config.js
...etc
I have webpack configured to build into the dist file.
I want to be able to import background images into my css in the src file from the assets file which I can do. But then with webpack's assets module found here https://webpack.js.org/guides/asset-modules/
{
test: /\.(jpg|png|svg|gif)$/,
type: 'asset',
},
when it builds it either copys the image over with asset/resource so then I basically have 2 of the same images in the project. Or it encodes it directly into the css in base64 with assets/inline or source with assets/source. This all seems pointless in my case.
Is there a way to have webpack just use the relative path in the assets folder instead of duplicating the image or encoding it? So instead of compiling to something like:
body: {
background: url(/[hashed-from-webpack].jpg);
}
it just compiles to
body: {
background: url(../assets/img/myimage.jpg);
}
Here is the entire webpack config file:
const path = require('path')
const rootDir = path.join(__dirname, '')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: {
app: path.join(rootDir, 'src/js', 'app'),
},
output: {
filename: '[name].js',
path: path.join(rootDir, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin(),
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: 'http://localhost/wordpress/',
files: ['**/*.php'],
}),
],
devServer: {
compress: true,
port: 3000,
open: true,
},
}
Hey I have this project which has this structure:
bundler -> webpack.common.js
src -> main.js, index.html, styles.css
package.json
node_modules... the rest doesnt matter really
It is set up like when I do: npm run dev webpack creates a live server using my current main.js for my index.html
The webpack.common.js looks like this:
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "../src/current_script.js"),
output: {
hashFunction: "xxhash64",
filename: "bundle.[contenthash].js",
path: path.resolve(__dirname, "../dist"),
},
devtool: "source-map",
plugins: [
new CopyWebpackPlugin({
patterns: [{ from: path.resolve(__dirname, "../static") }],
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../src/index.html"),
minify: true,
}),
new MiniCSSExtractPlugin(),
],
module: {
rules: [
// HTML
{
test: /\.(html)$/,
use: ["html-loader"],
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
// CSS
{
test: /\.css$/,
use: [MiniCSSExtractPlugin.loader, "css-loader"],
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
type: "asset/resource",
generator: {
filename: "assets/images/[hash][ext]",
},
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
type: "asset/resource",
generator: {
filename: "assets/fonts/[hash][ext]",
},
},
],
},
};
```
Now my question is how can I define multiple entries under certain URLs.
So for example now under localhost/ it will redirect me to index.html using my main.js
Is there a way of having localhost/2 use my index.html with another js file like main2.js
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),
}),
],
};
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.
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'
],
},
],
},
};