I'am creating a new project. As I completed installing npm packages and ran the basic setup, all worked fine, except, when I made changes in my code and saved the file and moved to browser to see the changes, the page was not reloaded in the browser. I have to refresh page manually to see the new changes.
Here is my package.json file :
{
"name": "resume",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/preset-react": "^7.12.10",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.1",
"webpack": "^5.12.2",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
}
}
Here is my webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { web } = require('webpack')
module.exports = {
mode: 'development',
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, './dist'),
open: true,
compress: true,
hot: true,
port: 8080,
},
target: 'web',
// entry: {
// main: path.resolve(__dirname, './src/index.js'),
// },
// output: {
// path: path.resolve(__dirname, './dist'),
// filename: '[name].bundle.js',
// },
module: {
rules: [
// JavaScript
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack Boilerplate',
template: path.resolve('./index.html'),
filename: 'index.html', // output file
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
}
I searched the web and it seems like the problem is with webpack-dev-server, but I'am not sure. Plz help.
Update webpack-dev-server version to 4.0.0-beta.0 I had the same issue too.
Related
I want to use now webpack for production, following up documentation i created webpack.common.js, webpack.dev.js and webpack.prod.js and installed webpack-merge: https://webpack.js.org/guides/production/
Everything was fine till i decided to deploy first time production webpack, i have followed guide and now this is not compiling correctly.I have loader: 'babel-loader' in my webpack.config.js as i didnt changed that file at all.
I receive below error while using script: "startWebpackProd": "webpack serve --open --config ebpack.dev.js",
ERROR in ./src/app.js 9:16
Module parse failed: Unexpected token (9:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|
ReactDOM.render(This is boilerplaye, document.getElementById("app"));
package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"#babel/core": "^7.13.8",
"#babel/preset-env": "^7.13.9",
"#babel/preset-react": "^7.12.13",
"babel-cli": "6.24.1",
"babel-loader": "8.2.2",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "^5.1.1",
"live-server": "^1.2.1",
"node-sass": "^5.0.0",
"normalize.css": "^8.0.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-modal": "^3.12.1",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"validator": "13.5.2",
"webpack": "^5.24.4",
"webpack-dev-server": "3.11.2"
},
"scripts": {
"serve": "live-server public/",
"buildWebpack": "webpack",
"startWebpackProd": "webpack serve --open --config webpack.dev.js",
"buldWebpackProd": "webpack --config webpack.prod.js",
"dev-server": "webpack serve"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"html-webpack-plugin": "^5.3.1",
"webpack-cli": "^4.5.0",
"webpack-merge": "^5.7.3"
}
}
webpack.config.js
const path = require('path');
console.log(path.join(__dirname, 'public'));
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js' // nazywamy jak chcemy ale ta jest dobra
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
},{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
// mode: 'development',
}]
},
devtool: 'eval-cheap-module-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
}
};
webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
},
});
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
});
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
I have a basic React app (2 small pages and a redux store), which is supposed to be very light. But when building the final bundle, webpack tells me that the bundle is 1.12 MiB, while the recommended limit is 244 KiB. Yet, I have made optimisations, with Terser plugin & code splitting.
Here is my webpack.config.js:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = () => {
const env = require("dotenv").config({ path: __dirname + "/.env" });
return {
mode: "development",
entry: "./src/Index.js",
output: {
path: path.join(__dirname, "./dist"),
filename: "[name].[hash].bundle.js",
publicPath: "/",
},
resolve: {
extensions: [".js", "jsx", ".json"],
alias: {
components: path.resolve(__dirname, "src/components/"),
pages: path.resolve(__dirname, "src/pages/"),
store: path.resolve(__dirname, "src/store/"),
src: path.resolve(__dirname, "src/"),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
{ test: /\.html$/, use: [{ loader: "html-loader" }] },
],
},
devServer: {
historyApiFallback: true,
port: 3000,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new Dotenv(),
],
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: { chunks: "all" },
},
};
};
And here is my package.json:
{
"name": "app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/plugin-transform-runtime": "^7.10.3",
"#babel/preset-env": "^7.10.3",
"#babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"dotenv-webpack": "^1.8.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"terser-webpack-plugin": "^3.0.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
How to fix this?
I want to load two plugins to webpack: extract-text-webpack-plugin and babel-minify-webpack-plugin.babel-minify-webpack-plugin should be only loaded if the environment is in production. Currently I'm creating envPlugin array and pushing plugins, depending on the environment flag.
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
const bundleJSMinifier = new MinifyPlugin();
let envPlugins = [CSSExtract];
if (isProduction) {
envPlugins.push(bundleJSMinifier);
}
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [...]
},
plugins: envPlugins,
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {...}
};
};
The question is there a better way to load plugins to webpack depending on environment I'm currently in.
You can split your production and development configuration in different files, put the common settings in a common file and use webpack-merge plugin to merge them in each env like this:
webpack.common.js
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: __dirname + '/admin/app/frontend/entry.js',
output: {
path: __dirname + '/admin/public/compiled',
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
include: __dirname + '/admin/app/frontend/',
use: {
loader: 'babel-loader'
}
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles.css",
}),
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|de)$/)
]
};
webpack.dev.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
});
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
plugins: [
new UglifyJSPlugin({
sourceMap: true
})
]
});
and in my package.json I have specific commands for each env. npm watch for development and npm build for production. each of them points to the correct env file:
{
"name": "my-app",
"version": "1.0.0",
"description": "my app desc",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js"
},
"repository": {
"type": "git",
"url": "https://repo-url"
},
"keywords": [
"bpaulino",
"bruno"
],
"engines": {
"node": "8.5.0"
},
"author": "Bruno Paulino",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.7.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
...
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-merge": "^4.1.0"
},
"dependencies": {
"axios": "^0.16.2",
"babel-plugin-prismjs": "^1.0.2",
"bootstrap-sass": "^3.3.7",
"history": "^4.6.3",
"lodash": "^4.17.4",
"marked": "^0.5.0",
"moment": "2.22.2",
"node-uuid": "^1.4.8",
"normalizr": "^3.2.3",
"npm": "^6.2.0",
"prismjs": "^1.15.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
...
}
}
using the webpack-merge plugin you can override any settings defined in the common configuration.
I am getting the following error:
[HMR] Waiting for update signal from WDS...
when I run "webpack" in the terminal
my webpack config js file is as follow:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: ['', '.js']
},
output: {
path: 'dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
and my package.json as follow:
{
"name": "hwr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"history": "^3.0.0",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-router": "^2.6.1"
}
}
Where does that error comes from?
It's not an error, you enabled the Hot Module Replacement (hence the [HMR]) feature in your Webpack build. That's just one of the log messages that come from the HMR feature. Sounds like you don't want to turn HMR on? In that case, you should remove 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server' entries from your entry points, the react-hot loader and in your loaders entry, the new webpack.HotModuleReplacementPlugin() from plugins and hot: true from your dev server settings.
So webpack isn't updating any changes I make or rebundling build.js with changes. Pretty frustrating issue. Not sure what the deal is. Could really use some help! Thanks! Code is below.
webpack.config.js
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {
watch: true,
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/only-dev-server',
DEV + "/App.jsx"
],
output: {
path: OUTPUT,
filename: "build.js"
},
module: {
loaders: [{
include: DEV,
loaders: ["react-hot", "babel"],
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
module.exports = config;
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react": "^15.2.0",
"react-dom": "^15.2.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
I ran ./node_modules/.bin/webpack to get the initial build.
Let me know if you need more information. Thanks again.
React-Hot-Loader can be very specific in its configuration. I would try the minimal successful configuration for React Hot Loader (taking care to use similar pathing and not via variable initialization with path.resolve) :
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/App.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}]
}
};