I am developing a web app in React using Webpack. I have followed this guide to generate bundle.js in production mode, but it is not working. I always get:
Warning: It looks like you're using a minified copy of the development
build of React. When deploying React apps to production, make sure to
use the production build which skips development warnings and is
faster.
This is my webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//FOR CSS
var config = {
devtool:'cheap-module-source-map',
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]')
}
]
},
plugins: [
new ExtractTextPlugin('styles.css', {allChunks: false}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: true
}
})
]
};
module.exports = config;
And this is the package.json file I am using:
{
"name": "p12uibetajsx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack -d",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.18.2",
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1",
"webpack-combine-loaders": "^2.0.3"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-responsive-carousel": "^3.0.21",
"webpack": "^1.13.3",
"webpack-combine-loaders": "^2.0.3"
}
}
Is there anything else I need to configure? Am I missing something?
Thank you very much.
Related
I created react app with by initializing webpack with npm init -y and then modified scripts and webpack config file manually. My file's contents are as below:
package.json
{
"name": "arw.ecahangirov",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"uglifyjs-webpack-plugin": "^2.2.0",
"weak-key": "^1.0.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"axios": "^0.19.0",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"style-loader": "^1.0.0"
}
}
webpack.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx", ".css"]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\.js$/
})
]
}
};
Problem is that, when I run npm run build, webpack does not minify main.js file which is output. It results with 716kb file size and by opening output file I observe that file is multilined and also contains comments. Why webpack does not care of minifiying in this case, although I started it with --mode production?
You have to specify a minifier for css.
Load this at top of your webpack config file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
To the rules block:
rules: [
//...
{
test: /\.(sa|sc|c)ss$/,
use: [{loader: MiniCssExtractPlugin.loader},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
//...
]
To the optimization block:
optimization: {
minimizer: new OptimizeCSSAssetsPlugin({})
}
To the plugins block:
plugins: [
//...
new MiniCssExtractPlugin({
filename: [name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
//...
]
You will need to load that plugins first
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
You can find a working config here
how can I bundle jquery and jquery.lazy with webpack? - Everytime I try this, I got an error.
My error is the following in the debug console of my browser:
TypeError: q is undefined
The rest is working fine. Maybe you can see that I've done something wrong.
My package.json:
{
"name": "mrd-apple",
"version": "1i.0.0",
"description": "mrd Apple",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"jquery-lazy": "^1.7.10",
"postcss-loader": "^3.0.0",
"webpack": "^4.29.3"
},
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1",
"webpack-cli": "^3.2.3"
}
}
}
My webpack.config.js
var webpack = require('webpack');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = function(env) {
return {
entry: ['./src/js/index.js'],
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
"css-loader"
]
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
}
}
Content of index.js
// JS
// require('./jquery.lazy');
require('./lightslider');
require('./simple-lightbox');
require('./init');
// CSS
require('./../css/index.css');
your issue is with how you are trying to use require.js
First of all, there are issues with your package.json:
both webpack and postcss-loader are devDependencies.
Also your version is invalid.
I had to add the following as devDependencies: uglifyjs-webpack-plugin, mini-css-extract-plugin, optimize-css-assets-webpack-plugin
The issue, however, is how you are trying to include these libraries.
When using require.js with a package.json and webpack, you would not be trying to require the .js file itself, instead you would either require('npm-package-name') or, better yet, import NpmPackageName from 'npm-package-name'; See: Dependency Management
If you wanted to load a library through HTML on your page and instead just reference it in your source, you can do that using webpack externals. See: Webpack Externals
for reference, here are my versions of your files:
package.json:
{
"name": "mrd-apple",
"version": "1.0.0",
"description": "mrd Apple",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"jquery-lazy": "^1.7.10"
},
"devDependencies": {
"css-loader": "^2.1.0",
"mini-css-extract-plugin": "^0.5.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
}
}
index.js:
// require('jquery');
// require('jquery-lazy');
import $ from 'jquery';
import jqueryLazy from 'jquery-lazy';
NOTE: I was unable to produce the exact error you provided, but assume it's due to the project setup itself.
I am trying to create a React app that isn't create-react-app and I am running into some issues. After running npm run start I received the "Cannot find module 'html-webpack-plguin'" error. I know it's installed, as I can see it in the node modules folder. I have tried using both npm install and yarn install for this. I have put in in the devDependencies and the regular dependencies, and neither seems to work. Is there something wrong with my webpack file or package.json?
Here is my webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plguin')
module.exports +{
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
Here is my package.json
{
"name": "reactboilerplate",
"version": "1.0.0",
"description": "React Webpack Redux Babel Boilerplate",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "Thomas Baric",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"webpack": "^4.29.3"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}
Well that was easy lol. Error became clear after seeing it as a title to my question. FML!
I am making a web app use react and php and i am using webpack for es6 to js so i generated files but i have a problem about webpack output bundle.js file.
this is my webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: [
'./src/index.jsx'
],
output: {
path: '/dist',
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
}, {
test: /(\.css|.scss)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
};
this is my package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.18",
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"react-hot-loader": "^3.1.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"bootstrap": "^4.0.0",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"reactstrap": "^5.0.0-beta"
}
}
why webpack generate and give me a bundle.js into the dist folder ? only saves it to the memory and show it on the localhost. i want use this react app with php but i can not handle to bundle.js.
Where is the problem and why the webpack did not generate the js file.
please help me
Your webpack configuration output filed got problem.
import const path = require('path') first in webpack.config.js and change output filed as below:
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}
And add following script into your package.json in script filed
"build": "webpack -p --progress"
Run npm run build
This is the expected behaviour for webpack dev server. If you wish to generate the output on disk, you need to run webpack, e.g:
"scripts": {
"start": "webpack-dev-server --history-api-fallback ...",
"build": "webpack"
}
then run npm build. For production, you should also set NODE_ENV=production, for example using cross-env:
"build": "cross-env NODE_ENV=production webpack"
I've been following Petr Tichy (#ihatetomatoes) Webpack 2 tutorial series, and have got to the this vid which covers installing React and Babel.
I've gone over the code with a fine tooth comb and spent a couple of hours googling but I just cannot get my code to perform in the expected way. The React method in my app.js file does not execute.
It should render "Hello World" into the root element of the index page, but I get nothing.
This is what I have...
./src/app.js
const css = require("./styles.scss");
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
./src/index.html
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js
const HTMLWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract( {
fallback: 'style-loader',
use: ['css-loader','sass-loader']
} )
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: "IWTE",
template: './src/index.html',
minify: {
collapseWhitespace: true,
},
hash: true
}),
new ExtractTextPlugin("styles.css")
],
devServer: {
contentBase: "./dist",
compress: true,
hot: true,
open: true
},
}
.babelrc
{
"presets": ["es2015","react"]
}
package.json
{
"name": "creator",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "MIT",
"private": true,
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"prod": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"eslint": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
Any advice or suggestions on what route to follow to debug this is greatly appreciated! I'm a relative noob to frontend dev. Thanks!
Inside of your package.json make a change as :
"scripts": {
"dev": "webpack-dev-server --hot --progress --colors",
"prod": "webpack -p"
}
You need to add --hot inside of your dev commmand to enable hot reloading.
Let me know if it doesn't work. Cheers!