This is my webpack.config file. When I run webpack, bundle.js correctly writes to project/dist/assets/bundle.js.
However, when I run npm start to serve up the files, I get an error:
Error: output.path needs to be an absolute path or /.
So... if I make the path absolute: "/dist/assets" or path: __dirname + "/dist/assets" then it serves up the files fine, and emits bundle.js, but it doesn't actually write it to my project/dist/assets folder.
The page looks fine and when I view source, I see <script src="/assets/bundle.js"></script> but it only exists on the localhost (publicPath).
Where am I going wrong? The goal being for npm start to write the bundle to my project folder AND serve it up with devServer.
var webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: "./dist/assets",
filename: "bundle.js",
publicPath: "/assets"
},
devServer: {
inline: true,
contentBase: "./dist",
port: 3000
},
module: {
loaders: [{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ["babel-loader", "babel-loader?presets[]=latest,presets[]=stage-0,presets[]=react"]
}, {
test: /\.json$/,
exclude: /(node_modules)/,
loader: "json-loader"
}, {
test: /\.css$/,
loader: "style-loader!css-loader!autoprefixer-loader"
}, {
test: /\.scss$/,
loader: "style-loader!css-loader!autoprefixer-loader!sass-loader"
}]
}
}
Use path for this:
var path = require('path');
....
output: {
path: path.join(__dirname, './dist/assets'),
Related
I am trying to deploy the front-end of my web application, but when I deploy to my hosting platform (currently AWS Amplify/S3) - no content displays on the website
I created the application using create-react-app, so the project structure follows their standard (public, src folders etc.).
When I run the application locally it works fine.
From the console errors, and looking at the index.html page that is generated by webpack, it looks like it is not replacing the %PUBLIC_URL% field that should be replaced with the public directory on build.
Please can someone explain how to fix this issue?
I have included my webpack.config file below and the full repo can be found here
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
entry: ['react-hot-loader/patch', './src/index.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.svg$/,
use: 'file-loader',
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use: 'file-loader',
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'react-dom': '#hot-loader/react-dom',
},
},
devServer: {
contentBase: './build',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./public/index.html'),
}),
],
}
module.exports = config
Turns out this was an issue with me trying to add a custom Webpack configuration to a create-react-app project.
I've removed the Webpack config now, and instead used the dist files created when using the create-react-app build process.
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>
I am facing error while getting same bundled image from different route
While my app is in route http://localhost:8080
My image load perfectly from url http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg
But as my app route changed to http://localhost:8080/dashboard
My image also loads from url http://localhost:8080/dashboard/3e8b0bc82f581817994bbe9e9396170b.jpg
Since the image is at url location http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg
So it shows 404 resource not found error while getting the resources from the given location.
I am using require('../image.jpg') to add image in my app.
This is my webpack.config.js file.
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', "env"]
}
},
{ test: /\.(png|jpg|svg)$/i, loader: "file-loader",
options:{outputPath:'images/'}},
{test:/\.json?$/,loader:'json-loader'}
],
},
devServer: {
historyApiFallback: true,
contentBase: './public',
hot:true
},
devtool:"cheap-module-eval-source-map"
}
I am using webpack version: "^3.1.0".
I am developing Dapp using Truffle v3.1.2 which is a development framework for Ethereum.I am using angular on node for this dapp & unfortunately I am very new to node & webpack.I am storing views in /views folder, images in /images folder & I need some help to modify the webpack.config.js file.I am using “npm run dev” to deploy it & I am getting “Error: [$compile:tpload] Failed to load template: views/main.html (HTTP status: 404 Not Found)” message.Please find the webpack.config.js file below.
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: [
'./app/bower_components/angular/angular.js',
'./app/bower_components/angular-route/angular-route.js',
'./app/javascripts/app.js',],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.js'
},
plugins: [
// Copy our app's index.html to the build folder.
new CopyWebpackPlugin([
{ from: './app/index.html', to: "index.html" }
])
],
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
loaders: [
{ test: /\.json$/, use: 'json-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
]
}
}
I'm having a problem with a pretty straight forward webpack configuration:
var webpack = require('webpack');
path = require('path');
var PATHS = {
app: __dirname + "/app"
};
var config = {
context: PATHS.app,
entry: {
app: ['webpack/hot/dev-server', './core/bootstrap.js']
}
,
// entry: './core/bootstrap.js',
output: {
path: PATHS.app,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: 'ng-annotate!babel', exclude: /node_modules/},
{test: /\.less$/, loader: "style!css!less", exclude: /node_modules|bower_components/},
{test: /\.json$/, loader: "json", exclude: /node_modules|bower_components/},
{test: /\.html$/, exclude: /node_modules/, loader: "raw"},
{test: /\.(ttf|eot|svg|otf)$/, loader: "file"},
{test: /\.woff(2)?$/, loader: "url?limit=10000&minetype=application/font-woff"}
]
},
plugins: [
new webpack.DefinePlugin({
ON_TEST: process.env.NODE_ENV === 'test'
})
],
devtool: "#inline-source-map"
}
if (process.env.NODE_ENV === 'production'){
config.output.path = __dirname + '/dist';
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
config.devtool = 'source-map';
}
module.exports = config;
I'm trying to build a minified version of my code and but when I'm running
NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html there is no bundle.min.js in my dist folder and when I'm running http-server dist I'm getting Uncaught Error: [HMR] Hot Module Replacement is disabled.
From going through the web I see that this is a common problem but nowhere did I find the way to fix this: I'm using the --hot flag that suppose to add the hot-swap plugin.