I am trying to setup webpack for ReactJs. I am clueless what is wrong with my Webpack Config File which gives me
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\wd\javascript\Projects\reactjs-basics
CODE IS HERE - Two files "Webpack.config.js " and "Package.json"
Webpack.config.js code is :
var webpack = require('webpack');
var path = require('path');
var DIST_DIR = path.resolve(__dirname,'dist');
var SRC_DIR = path.resolve(__dirname,'src');
var config = {
entry: SRC_DIR+'/app/index.js',
output:{
path:DIST_DIR+'/app',
filename:'bundle.js',
publicPath:'/app/'
},
module:{
rules: [
{
test: /\.js?/,
include: SRC_DIR,
use:{
loader:'babel-loader',
query:{
presets:['react','es2015','stage-2']
}
}
}
]
},
mode: 'development',
watch: true
}
module.export = config;
Package.json File is
{
"name": "reactjs-basics",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": " npm run build",
"build": "webpack -d && copy src\\app/index.html dist\\index.html && webpack-dev-server --content-base src\\ --inline --hot",
"build:prod": "webpack -p && cp src\\app/index.html dist\\index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"2015": "0.0.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}
**
for reference, Folder Structure with Webpack config code i have attache an image below
**
Please Click here for folder structure, code and folder structure is juxtaposed
You've to modify few things
webpack.config.js you have module.export. This is incorrect. it has to be module.exports[email protected] with [email protected]. babel-loader@8.* is not compatible with babel-core@6.*. You've to use babel-loader@7. Uninstall your existing babel-loader using npm uninstall -D babel-loader and install babel-loader@7 using npm install -D babel-loader@7Another thing i noted is, you have specified mode: 'development' in your webpack.config.js. its better to set mode to development or production via runtime parameters
Update
Remove mode & watch from your webpack.config.js
mode: 'development',
watch: true
Update your package.json with below details.
Development mode You don't need to set watch & mode as webpack-dev-server will do that for you when you run npm run dev
"scripts": {
"webpack": "webpack",
"dev": "mkdir -p dist && cp ./src/index.html dist/index.html && webpack-dev-server",
"prod": "mkdir -p dist && cp ./src/index.html dist/index.html && npm run webpack -- --mode production"
}
To launch local server you need to add below configuration in your webpack.config.js . Note the directory name to which the devserver points to.
devServer: {
contentBase: path.join(__dirname, "dist/"),
port: 9000
},
Production mode Execute npm run prod to build your project in production mode
You can see localhost in working state when your run npm run dev.This server is launched by webpack-dev-server library. For production build you have to configure your own server
Let me know if this helps
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments