Develop Reference

Webpack can't resolve file loader js files

I keep getting this error
Can't resolve 'file-loader'
I am running webpack serve command.
I've tried different regex but it always shows the same mistake. if this may have something to do with the way in which the React files are placed let me know.
package.json
{
"name": "Tick",
"version": "1.0.0",
"description": "Productivity app",
"main": "src/server/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "nodemon src/server/app.js",
"dev": "webpack serve",
"build": "webpack"
},
"author": "Gabriel Gamboa",
"license": "ISC",
"dependencies": {
"cross-env": "^7.0.3",
"express": "^4.17.1",
"nodemon": "^2.0.13",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.2",
"webpack": "^5.54.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"
}
}
Webpack config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src", "client", "index.js"),
mode: 'development',
output: {
path:path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}]
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: ['file-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "client", "index.html"),
}),
],
}
Please help I've tried everything

You need to install it as it is not listed in your package.json file as a dependency.
npm i file-loader -D

Webpack with Babel gives uncaught referenceError: require is not defined

I configured Webpack with following settings:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
mode: 'development'
};
And babel.config.json:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
The transpilation works fine, but after starting the page in browser i get the following error:
Uncaught ReferenceError: require is not defined
package.json
{
"name": "test",
"version": "0.0.1",
"description": "test",
"main": "main.js",
"scripts": {
"css-build": "node-sass _sass/main.scss dist/main.css",
"css-deploy": "npm run css-build && npm run css-postcss",
"css-postcss": "postcss --use autoprefixer --output dist/main.css dist/main.css",
"css-watch": "npm run css-build -- --watch",
"deploy": "npm run css-deploy && npm run js-build",
"js-build": "babel _javascript --out-dir dist",
"js-watch": "npm run js-build -- --watch",
"start": "npm-run-all --parallel css-watch js-watch",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.13.10",
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-react": "^7.12.13",
"autoprefixer": "^9.7.6",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015-ie": "^6.7.0",
"node-sass": "^4.13.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.0",
"webpack": "^5.24.4",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
I tried a lot of things, but nothing helps with my problem.

module.exports = {
entry: './app/index.js', // add this in webpack config
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
mode: 'development'
};

Webpack production version of website points to the wrong directories

I have two npm commands "build": "webpack --mode production" and "start": "webpack-dev-server --mode development --open". When I run the start command the web application runs as intended with all the CSS and javascript being transpiled correctly.
However when I run build the fils are generated as intended and when the main HTML file is opened the href and src do not point to the correct directories.
I looked at my webpack.config.js and it appears to be working as intended which leads me to a bit of head-scratching. Changing the HTML template causes the development version to break and have the production version work as intended. The intention is for both development and production version to work as intended.
For reference here is my directory structure:
root
|-.vscode
|-dist
| |-css
| |-img
| |-js
| |- output location for bundle.js index.html main.css
|-node.modules
|-src
|-css
| |-scss
|-js
| |-JSON
| |-models
| |-view
| |-app.js
|-index.html
|-.babelrc
|-package-lock.json
|-package.json
|-webpack.config.js
Webpack config file
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const babelLoader = require("babel-loader");
module.exports = {
entry: [
"babel-polyfill","./src/js/app.js"
],
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js",
},
devServer: {
contentBase: "./dist"
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
filename:"index.html",
template:"./src/index.html"
})
],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"]
}
}
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[local]"
}
},
"sass-loader"
]
}
]
}
}
and package.json
{
"name": "tempName",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "Fake Name",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/preset-env": "^7.7.1",
"babel-loader": "^8.0.6",
"chart.js": "^2.9.3",
"css-loader": "^2.1.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"gulp-babel": "^8.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.13.0",
"sass-loader": "^7.3.1",
"sortablejs": "^1.10.1",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"pokedex-promise-v2": "^3.2.0"
}
}
How do I specify the href(s) and src(s) in the HTML document to link to the CSS and javascript since they are added during the build script and are not in the HTML template?

Try these things:
1) instead of setting contentBase to dev-server try to set 'publicPath: '/'
2) set 'output.publicPath' to '/' also
3) if previous doesn't work, HtmlWepbpackPlugin has base option to add prefix for loaded scripts. but i strongly recommend to handle it with public path.
PS: fix your prod build, and only when fix webpack-dev-server. it will be easier

How to set up webpack custom entry and output

I'm learning webpack 4. Is there a way to set custom entry and output, because no tutorial seems to explain that.

You can try the following link:
https://www.valentinog.com/blog/webpack-4-tutorial/#webpack_4_overriding_the_defaults_entryoutput
Quote from the link:
I love webpack 4 zero conf but how about overriding the default entry point? And the default output?
Configure them in package.json!
An example from the link:
"scripts": {
"dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
"build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}
Hope this helps.

You can configure entry and output in webpack.config.js. In example configuration below I have added entry as a string whereas you can add as an object and array as well and in a similar way you can add output key as a string, as follows:
var path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
},
mode: 'development',
entry: './app/main.js',
cache: true,
output: {
path: __dirname,
filename: './resources/script.js'
},
module: {
rules: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
}
};
Below is the package.json to work with npm dependencies:
{
"name": "reactjs",
"version": "1.0.0",
"description": "React Js",
"keywords": [
"react"
],
"author": "Arpit Aggarwal",
"dependencies": {
"axios": "^0.18.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch -d"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
}
}

Webpack build step isn't generating build files

When I run npm build nothing seems to happen. When I look for the build files I don't see anything. npm start works fine though.
Package.json
{
"name": "pro-react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"postcss-loader": "^0.9.1",
"precss": "^1.4.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
}
Webpack.production.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
}
I also have .babelrc file and webpack.config.js file, let me know if those would be useful to see as well, thanks.

Might be related to the fact that build is an internal command. Seems like I have had this happen to me as well in the past. Check out this Question
In order to run a custom script, you can use the npm run-script build or just npm run build. As stated in the NPM documentation