Webpack slows down page - reactjs

I have the following config for my webpack:
var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
login: path.join(__dirname, 'src' , 'entry' , 'login.js'),
register: path.join(__dirname, 'src', 'entry', 'register'),
faqLogged: path.join(__dirname, 'src', 'entry', 'faqLogged'),
content: path.join(__dirname, 'src', 'entry', 'content'),
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js',
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
}
module.exports = config;
In my app I use AJAX and I ought use babel-loader. The problem is, if I use the cdnjs for babel-loader, and therefore no import statements in my app, the page loads almost instantly.
On the other hand, if I use webpack to bundle my page, now being able to use import, and doing so, will result in my page load time being over 4 seconds and I receive the following error in my browser's console ( Chrome ) :
[BABEL] Note: The code generator has deoptimised the styling of "http://localhost/build/content.js" as it exceeds the max of "100KB".
I have tried to minify the bundled file but that does not seem to be the issue. The fact that it has over 100kb doesn't bother me, what does is the absurd load time.

Related

Error while loading image from file-loader

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".

React + webpack dev environment setup - wrong filepath

I'm trying to set up a developer environment for React but I'm getting some issues with webpack pathing. Usually, a quick google solves issues like these but I haven't seen anyone with the same problem, which probably means I'm an idiot and is messing something up.
So, I followed a tutorial and I have a dev-folder and a output-folder. In output I have output.js, where I want webpack to output all my stuff. So, according to the guide, I should run ./node_modules/.bin/webpack and it should work with the config I have, but it's showing the wrong filepath. I want it to go to react-test/output/output.js but it's throwing in a /dev, making it react-test/dev/output/output.js. My webpack.config.js looks like this:
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
module: {
loaders: [{
include: DEV,
loader: "babel-loader"
}]
}
};
module.exports = config;
I can't see where dev is getting added.
I would modify the file to the following:
var path = require('path');
module.exports = {
entry: path.join(__dirname, '/dev/index.js'),
output: {
path: path.join(__dirname, '/output'),
filename: 'output.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
You don't need to require webpack in this file, but you do need to tell the module loader what to test. The presets I included are assuming you are using ReactJS and ES6, you may need to change them as appropriate.
webpack.config
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './dev/index.js',
output: {
path: path.resolve(__dirname, 'output'),
filename: 'output.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
devServer: {
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/Index.html' // Copy Index.html with script tag refrencing output.js in Output folder
})
]
}
Try to set context option to react-test directory.
And set DEV and OUTPUT paths realtive to it:
var DEV = path.resolve(__dirname, "./dev");
var OUTPUT = path.resolve(__dirname, "./output");
var config = {
context: path.resolve(__dirname, './'),
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
...

Can't see background image running webpack

I am recently learning React and have problem setting webpack. I wrote a background image in sass file but I can't see this image in browser, I checked the develope tool and saw a strange file name as the attatched picture shows. There's no error when I run webpack. I think I might set the webpack.config.js incorrectly. Can somebody take a look for me? here's the source code:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'eventsource-polyfill',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.sass$/,
loader: 'style!css?sourceMap!sass'
},
{
test: /\.(jpg|gif|png)$/,
loader: "file"
},
{
test: /\.(jpg|gif|png)$/,
loader: "url"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html',
inject: 'body',
})
]
};
I also put my files on github: https://github.com/john650914/ReactQuestion.git
Thank you very much~~~~~~~~~
Webpack will start looking for your url path at '/' which was set by your publicPath in your webpack.config.js
Looking at your repository with your link provided:
https://github.com/john650914/ReactQuestion.git
It seems like your image isn't in your projects root. You should specify the correct publicPath that leads to where you store your assets. So for example if you stored your images in /src/assets/ then your publicPath should be ./src/assets/ like this:
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: './src/assets/'
},

Why does browser keep showing same version with webpack?

I am using gulp& webpack to run my reactjs app. At the moment I have an issue that when I delete a file from my app it is still present in the browser chrome devtools. This is my webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: "./app/app.js",
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
filename: "myapp.js",
sourceMapFilename: "myapp.map"
},
devtool: '#source-map',
module: {
loaders: [{
loader: 'babel',
exclude: /node_modules/
}]
},
devServer: {
inline: true
}
}
Even when I delete the dist folder completely the browser still shows the app? I have turned the cache off for chrome devtools. How can I show the latest version of my app with webpack?

Webpack with babel-loader for react corrupts image files

I am using webpack with babel-loader to transform .jsx react files.
However, adding a file-loader or style- and css-loader does not correctly process the images required() in the react components or style sheets.
They get recognized by webpack and copied to the dist folder. The path to the image file is correct, I've verified this in the css and js output.
The server is also able to display the files, I've checked with some manually copied ones.
What is happening is that the images themselves get corrupted. No image viewer nor the browser can display the image which results in an invisible image in the browser.
What I've tried so far:
using only babel-loader as suggested in: https://github.com/webpack/file-loader/issues/35, results in Error: No handler for file type.
using file-loader directly
using image-webpack-loader (which seems to be using file-loader under the hood)
using IsomorphicLoaderPlugin (https://github.com/jchip/isomorphic-loader) which seems to be a simpler alternative to webpack-isomorphic-tools
using css background-images with url() and ExtractTextPlugin('style-loader", 'css-loader')
All of the above steps resulted in either errors with webpack not finding an appropriate handler or corrupted image files.
Here is my current webpack config for reference (I've included all of it in case there are any problems/conflicts I am overlooking):
var ExtractTextPlugin = require('extract-text-webpack-plugin'),
webpack = require('webpack');
IsomorphicLoaderPlugin = require("isomorphic-loader/lib/webpack-plugin");
module.exports = {
context: __dirname + '/client',
entry: ['babel-polyfill', './index.jsx'],
output: {
filename: 'app.js',
path: __dirname + '/dist',
publicPath: '/'
},
resolve: {
ignore: /node_modules/,
extensions: ['', '.js', '.jsx']
},
devtool: 'source-map',
plugins: [
new ExtractTextPlugin('styles.css'),
new IsomorphicLoaderPlugin({ keepExistingConfig: false }),
new webpack.DefinePlugin({
"process.env": {
BROWSER: JSON.stringify(true)
}
})
],
module: {
preLoaders: [
{
loaders: ['isomorphine']
}
],
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread'],
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file!isomorphic"
}
]
}
};

Resources