I have configured it as instructed at: https://www.npmjs.com/package/browser-sync-webpack-plugin
This is my webpack.config.js file
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const config = {
mode: 'production',
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
watch: true,
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: {
baseDir: ['dist']
}
})
]
}
module.exports = config;
package.json
{
"name": "real-estate-2",
"private": true,
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync-webpack-plugin": "^2.2.2",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"
},
"dependencies": {
"lodash": "^4.17.10",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}
But when I run the webpack I got this error on terminal:
Error: Cannot find module 'browser-sync-webpack-plugin'
I have installed the browser-sync-webpack-plugin as instructed: npm install --save-dev browser-sync-webpack-plugin
npm install --save-dev browser-sync
Related
I have a problem using the html-webpack-plugin. I am learning React, and I need to use html-webpack-plugin, but when I run it in developer mode, I have this error:
Error: Child compilation failed:
Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/react-shop'
ModuleNotFoundError: Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/ react-shop'
at /home/paolo/develop/react-shop/node_modules/webpack/lib/Compilation.js:2016:28
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:798:13
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :10:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:270:22
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :9:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:541:15
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:116:11
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:612:8
at /home/paolo/develop/react-shop/node_modules/neo-async/async.js:2830:7
at done (/home/paolo/develop/react-shop/node_modules/neo-async/async.js:2925:13)
- Compilation.js:2016
[react-shop]/[webpack]/lib/Compilation.js:2016:28
- NormalModuleFactory.js:798
[react-shop]/[webpack]/lib/NormalModuleFactory.js:798:13
- NormalModuleFactory.js:270
[react-shop]/[webpack]/lib/NormalModuleFactory.js:270:22
- NormalModuleFactory.js:541
[react-shop]/[webpack]/lib/NormalModuleFactory.js:541:15
- NormalModuleFactory.js:116
[react-shop]/[webpack]/lib/NormalModuleFactory.js:116:11
- NormalModuleFactory.js:612
[react-shop]/[webpack]/lib/NormalModuleFactory.js:612:8
- async.js:2830
[react-shop]/[neo-async]/async.js:2830:7
- async.js:2925 done
[react-shop]/[neo-async]/async.js:2925:13
- child-compiler.js:169
[react-shop]/[html-webpack-plugin]/lib/child-compiler.js:169:18
- Compiler.js:551 finalCallback
[react-shop]/[webpack]/lib/Compiler.js:551:5
- Compiler.js:577
[react-shop]/[webpack]/lib/Compiler.js:577:11
- Compiler.js:1196
[react-shop]/[webpack]/lib/Compiler.js:1196:17
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[react-shop]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1192
[react-shop]/[webpack]/lib/Compiler.js:1192:33
- Compilation.js:2787 finalCallback
[react-shop]/[webpack]/lib/Compilation.js:2787:11
- Compilation.js:3092
[react-shop]/[webpack]/lib/Compilation.js:3092:11*
`
I have already installed the plugin. This is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development',
resolve: {
extensions: [ '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: {
loader: 'HtmlWebpackPlugin',
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
})
]
}
This is my package.
{
"name": "react-shop",
"version": "1.0.0",
"description": "react eshop",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open",
"build": "webpack --mode production"
},
"keywords": [
"react",
"javascript"
],
"author": "Josue Quichca <josuelml28#hotmail.com>",
"license": "MIT",
"dependencies": {
"#babel/core": "^7.20.2",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1"
}
}
I am learning. Please help!
Try this:
Remove html-webpack-plugin from your package.json
rm -rf node_modules
npm cache clean -f
npm i html-webpack-plugin --save-dev
HMR always full reload everytime I change something in index.js. The only clue I got is it has something to do with module.hot.accept(), but I'm new to webpack and reading the very technical docs doesn't help.
Here is the details:
The warning from browser
My project's structure
package.json:
{
"name": "webpack-shits",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack",
"dev": "webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
}
}
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].js",
path: path.join(__dirname, "dist"),
clean: true,
},
devtool: "inline-source-map",
devServer: {
static: path.join(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(svg|png|jpe?g|gif)$/i,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Shits",
template: path.join(__dirname, "src/template.html"),
favicon: path.join(__dirname, "src/logo.svg"),
}),
],
};
index.js:
import style from "./main.css";
const h1 = document.createElement("h1");
h1.innerText = "Heading";
document.body.append(h1);
You can try to add the following code:
import "./main.css";
const h1 = document.createElement("h1");
h1.innerText = "Heading1";
document.body.append(h1);
if (module.hot) {
module.hot.dispose(() => {
document.body.innerHTML = "";
});
module.hot.accept();
}
module.hot.accept() will accept updates for itself.
The HMR logs in browser console:
[HMR] Updated modules:
[HMR] - ./src/index.js
[HMR] App is up to date.
I want to keep the Backend project I developed with Node JS as Build and keep it as 1 HTML file on my server as Webpack. I am developing with nodemon, no problem, but according to my configuration, the "NPM RUN BUILD" dwelling does not work. Could cause the problem?
30 different errors return, this is one. All of them write other library information like this.
"Module not found: Error: Can't resolve 'zlib' in '/ Users / ugurcanalyuz / Projects / Ekartex / ekartex_backend / node_modules / body-parser / lib'"
webpack.config.js
const path = require("path");
module.exports = {
entry: './server.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
compress: true,
port: 3200
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
}
server.js
const express = require("express");
const app = express();
const users = require("./src/routers/users");
app.use(users);
app.listen(3200, () => {
console.log("Sistem açık");
})
package.json
{
"name": "exxx",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "nodemon server.js",
"build": "webpack --mode production"
},
"repository": {
"type": "git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
},
"dependencies": {
"express": "^4.17.1"
}
}
devServer option is for client-side. for node.js you need to add
target: "node",
and also for better performance
const nodeWebExternals = require("webpack-node-externals");
// add this property to webpack config object
externals: [nodeWebExternals()],
Just run the following command, inside you command line (/terminal):
npm i zlib
i am using this webpack project template from here
to run it i use npm run serve .how can I add auto build/serve when files are changed. is it something to do with webpack or npm? .i am new to this javascript tooling & searching on google gives lots of options which is overloaded with information & configurations each different.
attaching the webpack config:
const path = require('path')
const webpack = require('webpack')
module.exports = env => {
return {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: "/"
},
mode: env && env.production ? 'production' : 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: [/\.vert$/, /\.frag$/],
use: 'raw-loader'
}
]
},
devServer
: {
contentBase: './dist'
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true)
})
]
}
}
my package.json file:
{
"name": "phaser3-webpack",
"version": "1.0.0",
"description": "A basic Phaser 3 starter project",
"main": "index.js",
"scripts": {
"build": "webpack",
"build:production": "webpack --env.production",
"clean": "rimraf dist/bundle.js",
"watch": "webpack --watch",
"serve": "webpack-dev-server"
},
"keywords": [
"phaser",
"webpack",
"es6"
],
"author": "John Cheesman",
"license": "MIT",
"dependencies": {
"phaser": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
}
}
Why does Hot Module Replacement stop working on webpack dev server?
My package.json file:
{
"name": "routing-react",
"version": "1.0.0",
"description": "Just a little ReactJS Training Ground",
"main": "index.js",
"scripts": {
"start": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "cp src/index.html dist/index.html && webpack -p"
},
"keywords": [
"react"
],
"author": "gd10",
"license": "MIT",
"dependencies": {
"css-loader": "^0.28.9",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-hot-loader": "^3.1.3",
"style-loader": "^0.20.1",
"webpack-hot-middleware": "^2.21.0"
},
"devDependencies": {
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
I have also set:
devserver = {
historyApiFallback: true,
inline: true,
hot: true
}
But it didn't helped.
webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
devServer: {
historyApiFallback: true,
contentBase: './',
inline: true,
hot:true,
port: 3004,
},
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
},
{
test: /\.css?/,
loader:'style-loader!css-loader'
},
]
}
};
module.exports = config;
Previously I had CSS loaders issue and after adding loaders in webpack.config.js I got webpack stopped.
how can I make Hot module work?
You need to activate the Hot Module Replacement Plugin, full instructions: https://webpack.js.org/guides/hot-module-replacement/