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
Related
I'm currently in the process of learning React and have encountered an error in the webpack section. I use the plugin transform-class-properties for the arrow functions but webpack shows error in processing them.
ERROR in ./src/app.js 86:20
Module parse failed: Unexpected token (86:20)
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
| }
| }
> handleRemoveAll = () => {
| this.setState( () => ({ options: [] }));
| }
error Command failed with exit code 2.
my webpack config file looks like this
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
};
and this is my package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Test User",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=react,env --plugins=transform-class-properties --watch"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"live-server": "^1.2.1",
"webpack": "^4.44.0"
},
"devDependencies": {
"webpack-cli": "^3.3.12"
}
}
You should add a loader to webpack configuration
https://survivejs.com/webpack/loading/javascript/
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
Also a .babelrc file
{
presets: [
[
'#babel/preset-env',
{
targets: {
browsers: 'last 2 versions',
},
loose: true,
modules: false,
},
],
'#babel/preset-react',
],
plugins: ['transform-class-properties'],
}
I'm trying to setup a simple html/Js page.
I've installed webpack and babel. I've configured package.json file with the "build" and "start" scripts.
The page works pretty well but the Warning: "DevTools failed to parse SourceMap: webpack:///node_modules/sockjs-client/dist/sockjs.js.map" raises every time I execute the "npm run start" command and I can't debug my code in the Chome Devtools
package.json:
{
"name": "my-proyect",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --config ./webpack.config.js --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.9.0",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.0.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 1
entry: './src/index.js',
///////// BABEL ///////////////
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js']
},
////////////////////////
///////// Plugins ///////////
plugins: [
new HtmlWebpackPlugin({
title: 'Hello Webpack bundled JavaScript Project',
template: './src/index.html'
})
],
// 2
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
// 3
devServer: {
contentBase: './dist'
}
};
I will really appreciate if someone can guide me through this problem.
Regards.
Adding this to the top of your webpack config file might help:
devtool: 'eval-source-map'
Go to Dev tools settings then go to Preferences. Try to turn off the "Enable Javascript source map" and turn off "Enable CSS source map" and see if it works.
"source-map-loader": "^1.0.0",
add this line to your devDependencies in package.json and run npm install
If they are just unimportant warnings that are bothering you when leaving the console, you can temporarily disable them...
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!
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/
Here is my current configuration and file structure. It successfully builds. There are no errors in my browser console. Just a blank page. I serve the dist folder. I installed all dependencies via npm. I had an initial error - angular is not defined - but I resolved that by installing the angular module. At the very least, it told me that server really is serving the dist folder.
The html file in my dist folder
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
My Webpack config
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './client/js/app.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.(css|sass)$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: { mimetype: 'image/png' },
}
],
},
plugins: [new HtmlWebpackPlugin()],
};
And my package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/.bin/webpack-dev-server --content-base dist"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"angular": "^1.6.4",
"angular-route": "^1.6.4",
"angular-utils-pagination": "^0.11.1",
"css-loader": "^0.28.0",
"express": "^4.15.2",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.4.1"
},
"devDependencies": {
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"
}
}
My server
const express = require('express');
const path = require('path')
const app = express();
const port = 8080;
app.listen(port)
app.use(express.static(path.join(__dirname, '../dist')));
Make sure you are properly bootstraping your Angular application by adding your ng-app directive to the index HTML file template as explained in the official HtmlWebpackPlugin documentation:
https://github.com/jantimon/html-webpack-plugin
https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md