bundle.js works on localhost:3000/abc (because it looks in the localhost:3000/assets folder), but if I go to localhost:3000/abc/xyz I get a 404 (because it looks in the localhost:3000/abc/assets folder).
My webpack.config.js
var webpack = require("webpack");
var path = require('path')
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, '/dist'),
filename: "bundle.js",
publicPath: "/assets/",
},
devServer: {
inline: true,
contentBase: "./dist",
port: 3000,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: "babel-loader",
query: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
},
{
type: 'javascript/auto',
test: /\.html/,
exclude: /(node_modules)/,
},
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.scss$/,
use:['style-loader','css-loader', 'sass-loader']
}
]
}
}
I cannot use an absolute path for the publicPath.
How can I access bundle.js when I am multiple layers deep?
In the index.html I had
<script type="text/javascript" src="./assets/bundle.js"></script>
All I had to do is to change it to
<script type="text/javascript" src="/assets/bundle.js"></script>
Related
Getting bundle.css generated inside the dist folder but it is not getting minified. I'm Manually loading them in my html files like this: <link rel="stylesheet" href="../static/dist/bundle.css">. Also importing the style files in index.js like so : import "../css/style.css";. How do i get this to minify?
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: ["./static/js/index.js"],
output: {
path: path.resolve(__dirname, "static/dist"),
filename: "bundle.js"
},
watch: true,
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', "#babel/preset-react"],
plugins: [
['#babel/plugin-proposal-object-rest-spread'],
['#babel/plugin-proposal-class-properties']
]
}
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "./bundle.css",
}),
]
}
error message:
webpack-dev-server
/home/panecitodigital/Desktop/react-course-projects/cse-app/webpack.config.js:35
};
^
my webpack.config.js
It was working fine until i tried to add the file-loader to work with images, every time i try to fix the mistake the cmd tells me i have a new one comes up. A newbie that has tried the solutions that were on the web with no results too. Please help :) will pay foward when im not a newb
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
It looks like you're missing an } after your rules in module. The error is showing up on the last line because it's not expecting the ; it's expecting one more } to close the entire object.
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}, // <---- this is missing
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
},
module: {
rules:[
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}
};
The errors I get below are shown in the console after I refresh on a nested route (register/email-confirmation). Whereas non-nested routes do not get this error.
I think the main problem is that it's searching for bundle.js and the image in the nested route path, as opposed to the root path.
The errors in my console:
GET http://localhost:3002/register/bundle.js net::ERR_ABORTED
Refused to execute script from 'http://localhost:3002/register/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
GET http://localhost:3002/register/a5e694be93a1c3d22b85658bdc30008b.png 404 (Not Found)
My webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BUILD_PATH = path.resolve( __dirname, "./client/build" );
const SOURCE_PATH = path.resolve( __dirname, "./client/src" );
const PUBLIC_PATH = "/";
...
module.exports = {
devtool: 'eval-source-map',
context: SOURCE_PATH,
entry: ['babel-polyfill', SOURCE_PATH + '/index.jsx'],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/, /server/],
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react', 'stage-1', 'stage-0', 'stage-2'],
plugins: [
'transform-decorators-legacy',
'transform-es2015-destructuring',
'transform-es2015-parameters',
'transform-object-rest-spread'
]
}
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
],
},
output: {
path: BUILD_PATH,
filename: "bundle.js",
},
devServer: {
compress: true,
port: 3002,
historyApiFallback: true,
contentBase: BUILD_PATH,
publicPath: PUBLIC_PATH,
},
plugins: [
new webpack.DefinePlugin(appConstants),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'client/src/index.html'),
inject: true
}),
],
watch: true,
}
I don't know about this bug, but I highly recommend using fuse-box
fuse-box is the future of the build systems, within few minutes you will be running your project with high speed hot reload and many others utitilites...
check this react example seed, it's incredibly amazing..
I tried to add 'target:node' to the webpack.dev.js to exclude node_modules from my bundle file. This results in an error. Now I have 'target:web' but has the node_modules back in. This is my config file for the applicationpart(trying to use DllReferencePlugin):
var path = require("path");
var webpack = require("webpack");
module.exports = {
target:'web',
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
How can I exclude the node_modules folder from the ha.js (app bundle) build? for the complete code see here
Here an example:
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // <---
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
I keep getting Cannot GET /task I tried to modify my webpack with solutions I found here but I still get it.
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}, {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
devServer: {
historyApiFallback: {
index: '/index.html'
},
stats: true,
inline: true,
progress: true
}
plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
}
I think client gets index.html only when path is /.
Try to use this setting.
devServer: {
historyApiFallback: true
}