Develop Reference

Webpack not making JS modules

I want to make vanilla js/bootstrap website and I am using webpack. I have been following various instructions and tutorials but they do not seem to work.
Here is my webpack.config.js:
const path = require('path')
module.exports = {
entry: {
auth: [
path.resolve(__dirname, 'src/js/auth.js'),
path.resolve(__dirname, 'src/js/msal-2.28.1.js')
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
entry: {
main: [
path.resolve(__dirname, 'src/js/index.js'),
path.resolve(__dirname, 'src/js/api.js')
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
require('autoprefixer')
]
}
}
},
{
loader: 'sass-loader'
}
]
}
]
}
}
But the error I get when I run webpack is:
Module not found: Error: Can't resolve 'auth' in '/Users/me/Projects/AProject/src/js'
Did you mean './auth'?
All of the .js files exist where they should:
Image of JS files in correct folder structure
So I am at a loss as to what is going on. If I remove the second entry point (main) it builds fine no errors.
I have treid following every single tutorial and guide I can find and it just doesn't work.

Thanks to #Juho Vepsäläinen
There were two errors occuring:
I had an import for auth.js in api.js
I have multiple entry: points and apparently JS will only use the last one.
Here is working config:
const path = require('path')
module.exports = {
entry: {
auth: [
path.resolve(__dirname, 'src/js/auth.js'),
path.resolve(__dirname, 'src/js/msal-2.28.1.js')
],
main: [
path.resolve(__dirname, 'src/js/index.js'),
path.resolve(__dirname, 'src/js/api.js')
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
require('autoprefixer')
]
}
}
},
{
loader: 'sass-loader'
}
]
}
]
}
}

TypeError: Object(...) is not a function in react-fontawesome

Hellor there, I am working with react-fontawesome and webpack 4.33 version and I have this issue when I use a IconComponent it throws me an error TypeError: Object(...) is not a function.
It seems that the code points right here:
var renderedIcon = Object(_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__["icon"])(iconLookup, _objectSpread({}, classes, transform, mask, {
symbol: symbol,
title: title
}));
I have this in my webpack dev config file:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: {
app: path.resolve(__dirname,'src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
publicPath: 'http://localhost:9001/',
chunkFilename: 'js/[id].[chunkhash].js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
open: true,
port: 9001,
hot: true,
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.jpg|png|gif|woff|woff2|eot|ttf|svg|mp4|webm$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'assets/',
}
}
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html')
}),
],
}
I think I didn't add some configuration to my webpack file or should I report this as bug in the repository of react-fontawesome?

Webpack Image for React Application

I've read through most posts, but still can't figure out why my application won't display an image. I'm using webpack 4+ in a React application.
My webpack config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(html)$/,
use: ['html-loader'],
},
{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-env', '#babel/preset-react'],
},
},
{
test: /\.(s*)css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css',
})
],
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
devServer: {
historyApiFallback: true,
contentBase: './',
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
},
};
I then call an image JSX tag in one of my components <img src={require('../assets/GGGlogo.png')} /> where the assets folder is also contained within my src folder. When I run the webpack dev server, everything compiles successfully and the app starts.
However, my chrome console outputs: GET http://localhost:8080/app/b561359832a3836146dd3f42233e77f7.png 404 (Not Found)
When I run my dev script to make a dist folder with the bundle.js and image, the above hash is indeed the image I want. Why is there a 404 error when trying to find the image?

Webpack with publicPath: '/' does not prepend '/' to spitted chunks

Could someone please help me with my issue. In one of the source files I use code splitting technique
const Home = resolve => require(['./views/Home.vue'], m => resolve(m.default)), the problem is that unless I set publicPath output option to '/js', the chunks generated by code spliting omit / and on load are requested as jsfb5715f933a55e481dbe.2.js, the entry points are working and requested properly with at '/js/' or '/css/' without any issue. It is only the chunks generated by code splitting are failing to prepend '/' between public path and filename. This is my config
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
const extractScss = new ExtractTextPlugin({
filename: 'css/[name].css'
})
const sassOpt = {
sourceMap: true,
includePaths: [
path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
path.resolve(__dirname, 'node_modules/motion-ui/src'),
path.resolve(__dirname, 'resources/assets/sass'),
path.resolve(__dirname, 'resources/assets/sass/libs/animate.scss')
]
}
module.exports = {
context: path.resolve(__dirname, 'resources/assets'),
entry: {
main: [
'babel-polyfill',
'webpack/hot/dev-server',
// ?reload=true enables full page reload on hmr failure
'webpack-hot-middleware/client?reload=true',
'./js/app'
],
elastic: [
'./js/lib/elasticsearch-plugin'
]
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name].chunk.js',
chunkFilename: '[chunkhash].[id].js',
publicPath: '/',
pathinfo: true
},
devtool: 'eval',
module: {
rules: [
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules|vue\/src/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['lodash']
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true,
loaders: {
scss: 'vue-style-loader!css-loader?sourceMap=true!sass-loader?' + JSON.stringify(sassOpt)
}
}
},
{
test: /\.s[a|c]ss$/,
use: extractScss.extract(['css-loader?sourceMap=true', 'sass-loader?' + JSON.stringify(sassOpt)])
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue']
},
plugins: [
extractScss,
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}

Can't find bundle.js

I know this question has been asked before, but I honestly can't find the answer anywhere-- it appears as if I'm doing everything I should however bundle is not created. So I have this webpack.config.js file that's supposed to handle HMR + React, and typescript (with tsx syntax), but it's not creating the bundle. Throws no errors on compilation, and seems to be doing alright, but the bundle returns a 404 when I try to fetch it. Here's my file structure:
someApp/
src/
index.tsx
components/
Hello.tsx
dist/
webpack.config.js
...
And here's my webpack config:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index.tsx'
],
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devtool: 'eval',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: [
'react-hot-loader',
'ts-loader'
],
include: path.join(__dirname, '/src')
}
],
preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader' }
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};
Another strange thing is that I think it might have something to do with executing this through node, since when I just run webpack by itself it compiles the bundle. Here's my code for starting up the server:
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err)
}
console.log('Listening at http://localhost:3000/')
})
Maybe I'm missing something, but I'm pretty new to webpack so any help would be amazing!

Thats because webpack-dev-server is serving bundle.js from memory. This is done to make serving bundle.js fast. You can add another webpack config for production that spits out bundle.js to disk
module.exports = {
entry: './src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
.
.
.
and all your other modules, just don't include your dev-server
if you want to fetch bundle.js like localhost:3000//..../bundle.js
try this
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry:'./src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/public/'
},
//plugins: [
// new webpack.HotModuleReplacementPlugin()
//],
devtool: 'eval',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: [
'react-hot-loader',
'ts-loader'
],
include: path.join(__dirname, 'src')
}
],
preLoaders: [
{ test: /\.js$/, loader: 'source-map-loader' }
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};
EDIT: If you want to fetch bundle.js
you have to use what is defined in the publicPath: '/public/'. so for you the url you can fetch bundle.js from is this localhost:3000/public/bundle.js

I think you need to change your output to this:
output: {
path: path.join(__dirname, '/dist'), // <- change last argument
filename: 'bundle.js',
publicPath: '/public/'
},