Try to roll into the webpack. Using official docs. index.js reloads but index.html does not.
Command for build: webpack-dev-server --mode development --open
explorer
project in vs code
wp config:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, './dist'),
},
devServer: {
}
};
package.json scripts:
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --open"
},
Webpack ver:
"devDependencies": {
"webpack": "^4.10.2",
"webpack-cli": "^2.1.4",
"webpack-dev-server": "^3.1.4"
}
*Do not ask HtmlWebpackPlugin, I think without this hack should work.
I using HtmlWebpackPlugin, works well.
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
Related
Trying to launch my very first React application, and when I try to launch it using "dev" script in package.json, then it crashes the chrome tab. In task manager ram consumption gets even to 7.5 GB
My code is:
src\index.jsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import {Header} from "./header";
window.addEventListener('load', ()=>{
ReactDOM.render(<Header />, document.getElementById('react_root'));
})
src\header.jsx
import * as React from "react";
export function Header(){
return (
<Header>
<h1>Reddit for our own</h1>
</Header>
);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<div id="react_root"></div>
</body>
</html>
package.json
{
"name": "skillbox",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "env NODE_ENV=development webpack --config webpack.config.js",
"build:prod": "env NODE_ENV=production webpack --config webpack.config.js",
"dev": "env NODE_ENV=development webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.4.2",
"typescript": "^4.9.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
webpack.config.js
const path = require('path');
const NODE_ENV = process.env.NODE_ENV;
const HTMLWebpackPlugin = require('html-webpack-plugin');
const IS_DEV = NODE_ENV === "developement";
module.exports = {
resolve:{
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
},
mode: NODE_ENV ? NODE_ENV : 'development',
entry: path.resolve(__dirname, 'src/index.jsx'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
module:{
rules: [{
test: /\.[tj]sx$/,
use: ['ts-loader']
}]
},
plugins: [
new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'index.html') })
],
devServer:{
port: 8000,
open: true,
hot: false
}
};
Console does not give any error, it is just the browser, which crashes because of memory.
I am using Webpack version 6.14.8 in an Asp.net Core Razor Pages application in Visual Studio 2019. I am trying to create a readable output file. Here is the structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
|-->dist (generated by webpack)
------->main.js (webpack bundle)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
The src/index.js file is blank index.js file.
The package.json: -
{
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --entry ./src/index.js --output ./dist/main.js --mode development",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.20",
"startbootstrap-simple-sidebar": "^5.1.2",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I am trying to create a readable output folder: -"dist/main.js" in wwwroot folder: dist/main.js. However, when I ran the command: npm run wbp, I received the following error message about the entry module could not be found: Error: Can't resolve './src/index.js' in C:\ directory folder: -
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >npm run wbp
>helloword#1.0.0 wbp C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
>webpack ./src/index.js --output ./dist/main.js --mode development
asset main.js 1.47 KiB [emitted] (name: main)
.dist/main.js 644 bytes built] code generated
ERROR in main
Module not found: Error: Can't resolve './src/index.js' in C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
webpack 5.1.3 compiled with 1 error in 858 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! HelloWorld#1.0.0 build: `webpack --config webpack.config.js --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the HelloWorld#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2020-10-18T07_19_13_940Z-debug.log
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >
The dist/main file was created in the project directory and its contents are: -
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/*!**********************!*\
!*** ./dist/main.js ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in mode: \"development\").\n * This devtool is not neither made for production nor for readable output files.\n * It uses \"eval()\" calls to create a separate source file in the browser devtools.\n * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable the default devtool with \"devtool: false\".\n * If you are looking for production-ready output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/ })()\n;\n\n//# sourceURL=webpack://HelloWorld/./dist/main.js?");
/******/ })()
;
I looked at the url address:- https://webpack.js.org/configuration/devtool/, and I tried the "output.path" option: Output|webpack, but it did not work, when I ran the "npm run wbp" command.
How do I fix the issue of input: .src/index.js file is not found and how do I create a readable output: dist/main file?
Thank you in advance.
Current structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
----->dist (generated by webpack-created by the command: npm run build)
------->main.js (webpack bundle-created by the command: npm run build)
------->index.html (created by the command: npm run build)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
package.json
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "SET NODE_ENV='production' && webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"lodash": "^4.17.20",
"popper.js": "^1.16.1",
"startbootstrap-simple-sidebar": "^5.1.2",
"style-loader": "^2.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"#fullcalendar/core": "^5.3.1",
"#fullcalendar/daygrid": "^5.3.2",
"#fullcalendar/list": "^5.3.1",
"#fullcalendar/timegrid": "^5.3.1"
}
}
I updated the input and output files of the webpack.config.js file in development mode as follows: -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development',
entry: [
'babel-polyfill',
'./wwwroot/src/index.js'
],
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.js', '.json']
},
module: {
rules: [
{ test: /\.(js)$/, use: { loader: 'babel-loader', options: {presets: ['#babel/preset-react']} }},
{ test: /\.(sass|scsss|css)$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] },
]
},
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], //in order to ignore all modules in node_modules folder
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),
],
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
and afterwards run the command:- npm run build
I'm following the official Webpack getting started guide and I get an error on the Using a Configuration section. It says to create a webpack.config.js file with:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I then run the following command:
npx webpack --config webpack.config.js
The error I get is:
Cannot find module '/Users/Documents/Web_Development/tone/webpack.config.js'
The guide does not seem to give any ideas of what could be wrong here. Also my code editor is telling me there is an error with const path = require('path'); saying "Expected a JSON Object, array or literal;
My Directory structure:
webpack.config.json
package.json.lock
package.json
node_modules/
dist/
index.html
main.js
src/
index.js
package.json:
{
"name": "tone",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
The solution was to change the webpack.config.json file to webpack.config.js.
You have to make sure that the webpack.config.js file is in the root of your project.
Update:
Code pushed to https://github.com/gsouvik/react_spa_experiment
Initial Post:
I know there are hundreds of threads out there, some had typos in webpack config, some used the loaders in a wrong way, some got it solved, some still open. But after numerous tries I still cannot get this working, a simple "Hello World" using Webpack 4, React js.
What I did
I was following this video tutorial line by line:
React & Webpack 4 from scratch
My package.json
{
"name": "my_react_experiment_2",
"version": "1.0.0",
"description": "Basic react with webpack ",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --hot",
"build": "webpack --mode production"
},
"author": "Souvik Ghosh",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};
My .babelrc
{
"presets": ["env", "react"]
}
My directory structure
Expected behaviour
I fire up the dev server npm run dev. Expected to see my shiny new React js page saying "My first React Webpack project" (from the component /components/App.js)
Actual Behavior
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "./components/App";
|
ReactDOM.render(, document.getElementById('root'));
| //ReactDOM.render('Hello User ', document.getElementById('root'));
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main2
If required I can share the codebase via a git repo. Any help is greatly appreciated.
The issue is with typo in your webpack config file.
You have module.export which is not correct. It should be module.exports
Working example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};
I have a strange problem.... (Please, ignore my bad English :v)
I'm making app using HTML/CSS and js with jQuery. I'm using webpack too. I was using webpack-dev-server command since today - everything was working perfect. I wanted to generate single file - "bundle.js" without using server, cause i wanted to open app at another pc, without webpack.
That's how game looks like when it works
When I changed config in package.json from:
"start": "webpack-dev-server ./src/scrable.js"
To:
"start": "webpack ./src/scrable.js ./bundle.js"
I don't have any errors in my CMD console, when I typed "npm start".
But, when I opened my index.html file I saw in "source" mode that I have one error, which means that browser 'Cannot find module "bundle.js"'.
App is working, but not like it should - elements react for clicks, they're running some functions, but... just look at this:
That's how game looks like when it doesn't work
Do you have any ideas?
This is my package.json file
{
"name": "jstest_",
"version": "1.0.0",
"description": "",
"main": "scrable.js",
"scripts": {
"start": "webpack ./src/scrable.js ./bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
And this is my webpack.config.js file
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/scrable.js",
output: {
path: __dirname,
filename: "bundle.js",
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
};