I am trying to setup a new project and am having a bit of trouble with webpack-dev-server, it looks like the client compiles successfully but I cannot view the index.html or the main.js, they just dont seem to be available.
I have tried a bunch of different webpack config setups but none of them seem to work.
I have a project which has a client and a server directory, my folder structure looks like:
> project
> dist
> src
> client
client.tsx
webpack.config.js
> server
package.json
In package.json I have a dev client script: "dev-client": "cd ./src/client && webpack-dev-server -w",
my webpack.config.js looks something like this (i have changed it around quite a bit trying to get this to work):
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const projectRoot = path.join(__dirname, "..", "..");
module.exports = {
devtool: "inline-source-map",
mode: "development",
entry: "./client",
output: {
path: path.join(projectRoot, "dist", "public"),
publicPath: "/public/",
},
resolve: {
extensions: [".js", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: "ts-loader",
},
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "sass-loader",
},
],
},
{
test: /\.(jpe?g|gif|png|svg|woff|woff2|ttf|eot)$/,
use: {
loader: "url-loader",
options: {
limit: 10000,
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin(),
],
devServer: {
contentBase: path.join(projectRoot, "dist"),
},
}
When I run npm run dev-client I get the success message i ｢wdm｣: Compiled successfully. but when I navigate to http://localhost:8080/ all I see is the server which gets compiled to the dist folder.
Dependencies info:
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"ts-loader": "^4.2.0",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3"
So after a bunch of testing I figured out that rolling back to 3.1.1 of webpack-dev-server fixed the issue, this lead me onto this issue:
https://github.com/webpack/webpack-dev-server/issues/1373
Which says that the issue is caused by spaces in the project path. I removed the spaces and it worked perfectly.
Posting here in case someone else has the same issue.
Related
I'm running into an error on Windows 10 whenever I try to run webpack, it works fine on macOS.
This is the error
[webpack-cli] HookWebpackError: Not supported
It runs fine without "CopyPlugin", but I would like to copy img folder into dist folder. Have you experienced similar issues and how did you fix them?
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = {
entry: ['./src/assets/scss/app.scss', './src/assets/js/app.js'],
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist',
filename: 'assets/js/app.js',
},
module: {
rules: [
{
test: /.s?css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: {
importLoaders: 2
}
},
{
loader: 'sass-loader'
}
]
}
],
},
resolve: {
extensions: [".js", ".jsx"]
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
`...`,
new CssMinimizerPlugin(),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: './assets/css/app.css'
}),
new CopyPlugin({
patterns: [
{ from: "./src/assets/img", to: "assets/img" }
],
}),
],
devServer: {
open: true,
port: 3000,
hot: true,
static: {
directory: path.join(__dirname, './'),
}
},
};
From package.json
"devDependencies": {
"ajv": "^7.2.4",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"clean-css": "^5.2.2",
"copy-webpack-plugin": "^10.0.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^2.4.5",
"sass": "^1.44.0",
"sass-loader": "^12.3.0",
"terser-webpack-plugin": "^5.2.5",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}
Your node version is lower than 12.20，Please select one of the schemes
1.Upgrade your node
npm install node#12.20.0 -g
Or the latest
npm install node#latest -g
Under Windows npm install node may note work, and you should install the latest from https://nodejs.org/en/download/ using Windows Installer (.msi)
2.Reduce the version of copy-webpack-plugin
npm install copy-webpack-plugin#9 -D
I am stuck to build the node js project using webpack and I am using pug engine for front end.
My Project Structure:
bin
controller
- csv.controller.js
public
- stylesheets
- javascript
- images
routes
- csv.route.js
- index.route.js
views
- layouts
-- layout.pug
-index.pug
app.js
Package.json File
{
"name": "csv",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "webpack --mode=production",
"build:dev": "webpack --mode=development",
"start":"nodemon ./app.js",
"start:dev": "webpack-dev-server --mode=development"
},
"dependencies": {
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"cookie-parser": "~1.4.4",
"csv-parser": "^2.3.1",
"csv-writer": "^1.5.0",
"debug": "~2.6.9",
"express": "^4.17.1",
"express-fileupload": "^1.1.6-alpha.5",
"fast-csv": "^3.4.0",
"http-errors": "~1.6.3",
"morgan": "^1.9.1",
"multer": "^1.4.2",
"npm-check-updates": "^3.1.23",
"request": "^2.88.0"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"style-loader": "^1.0.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1",
"webpack-merge": "^4.2.2"
}
}
Actually what I want, after build, A dist folder contain a build.js or whatever its name and all public folder assets in the same directory. I tried with some below codes to build the project.
Webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config = {
entry: {
app: "./app.js"
},
target: "node",
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js"
},
devServer: {
port: 3000
},
plugins: [
new HtmlWebpackPlugin({
template: "./views/index.pug"
})
],
module: {
rules: [
{
test: /\.pug$/,
use: ["pug-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: [/.js$/],
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"]
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
}
};
module.exports = (env, argv) => {
if (argv.mode === "development") {
}
if (argv.mode === "production") {
}
return config;
};
I know this question is old, but just in case somebody is looking for an answer.
You need another Webpack config for app.js, which is express entry point.
Call it webpack.server.js or webpack.server.config.js or whatever convenient. Make sure to include webpack-node-externals:
https://www.npmjs.com/package/webpack-node-externals
It may look something like this:
//webpack.server.js
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
return ({
entry: {
app: ./src/server/app.js,
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js',
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
});
};
Also use webpack-dev-middleware in your app.js.
See the below link:
https://webpack.js.org/guides/development/
In package.json include a script that looks something like this:
"server:dev": "webpack --config webpack.config.js && webpack --mode development --config webpack.server.js && node ./dist/app.js",
In your webpack.config.js make the entry point the js file that imports your front-end assets..
That is your stylesheets and any other js codes..
Not sure what css framework you are using.
But, I am using tailwindcss and I have a js entry point file that imports tailwindcss and my other js codes.
So essentially you may need two webpack config files one for the front-end and one for the express server.
Hope I am making sense.
Desired Behaviour
I want to be able to:
Use webpack to define a build process that uses babel to convert an ES6 server side Node file to "plain javascript"
Current Behaviour
If I just run:
node app.js
I get import errors:
import express from "express";
^^^^^^^
SyntaxError: Unexpected identifier
What I've Tried
When I try and define a build process in webpack, I get errors like:
Can't resolve
tls/net/fs/dns/child_process/aws-sdk/./local_settings/npm/node-gyp
There is a possible solution offered here, but it doesn't resolve all errors (these errors remain: aws-sdk, ./local_settings, npm, node-gyp):
target: "node"
There are also warnings like:
Module parse failed: Unexpected token
Critical dependency: the request of a dependency is an expression
This "how do I use ES6 in production?" question seems to be common, eg:
NodeJS in ES6/ES7, how do you do it in production?
Quickstart guide to using ES6 with Babel, Node and IntelliJ
Getting ready for production use
Is it okay to use babel-node in production
but none of the answers I have found seem definitive or specifically relate to a webpack solution.
Below is code I have now:
from webpack.config.js
const path = require('path');
console.log("the __dirname is: " + __dirname);
module.exports = {
entry: "./src/js/app.js",
output: {
filename: "app.js",
path: path.resolve(__dirname, "dist/js")
},
target: "node",
mode: "development",
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
},
{
test: /\.jpg$/,
use: [
{ loader: "url-loader" }
]
}
]
}
}
from package.json:
...
"main": "app.js",
"scripts": {
"start": "nodemon ./app.js --exec babel-node -e js",
"build": "webpack",
"watch": "webpack --w"
},...
"dependencies": {
"bcrypt": "^2.0.1",
"body-parser": "^1.18.2",
"cors": "^2.8.4",
"express": "^4.16.3",
"jsonwebtoken": "^8.2.1",
"mongodb": "^3.0.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"
}
Question
What should my webpack.config.js and package.json files look like in order to successfully convert the ES6 file to "plain javascript"?
By default, Webpack tries to bundle everything into a single .js file. For client-side projects this is fine, but for NodeJS projects it becomes slightly more complicated because you are including code from node_modules as well. Sometimes that can cause errors like the one you're seeing here.
What you want to do in addition to targets: "node" is tell Webpack not to bundle external dependencies (i.e. node_modules).
There's a useful library called webpack-node-externals that helps with this:
var nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
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
...
};
So it's not really about "plain javascript", more like trying to get Webpack to output a file which is compatible with the NodeJS ecosystem.
In my project
package.json (listed only babel related packages):
"#babel/core": "7.0.0-beta.37",
"#babel/plugin-syntax-dynamic-import": "7.0.0-beta.37",
"#babel/register": "7.0.0-beta.37",
"babel-eslint": "https://github.com/kesne/babel-eslint.git#patch-1",
"babel-helper-annotate-as-pure": "^7.0.0-beta.3",
"babel-loader": "^8.0.0-beta.0",
"babel-minify-webpack-plugin": "^0.2.0",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-class-properties": "^7.0.0-beta.3",
"babel-plugin-transform-decorators": "^7.0.0-beta.3",
"babel-plugin-transform-es2015-modules-commonjs": "^7.0.0-beta.3",
"babel-plugin-transform-es2015-template-literals": "^7.0.0-beta.3",
"babel-preset-typescript": "^7.0.0-alpha.19",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
npm package "ui/base" is written in ES 6.
And I am trying to import it on a page like
import '#ui/base';.
package.json of "ui/base".
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babili-webpack-plugin": "^0.1.2",
"webpack-dev-server": "^2.7.1",
"webpack-node-externals": "^1.6.0"
The built version of a package is in ui/base/target/package/#ui/base/0/Main.js
Now, during the build process of my project, I am getting an error saying
ERROR in ./node_modules/#ui/base/src/components/accordion/Accordion.js
Module parse failed: Unexpected character '#' (18:0)
You may need an appropriate loader to handle this file type.
| import style from './accordion.css';
|
| #Define(`ui-base-v${__VERSION__}-accordion`, {
| style,
| })
The error is being thrown from the source of components. The built version of a package is not being taken in a build process of a project.
I am using following rules in webpack to build the project.
// Resolve imports to Typescript too without needing .ts
module.exports.resolve = {
extensions: ['.js', '.ts'],
};
module.exports.rules = [
{
test: /\.(js|ts)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
}],
},
{
test: /\.html$/, // plugin to import HTML as a string
use: [{
loader: 'raw-loader',
options: {
exportAsEs6Default: true,
},
}],
},
{
test: /\.(less|css)$/,
use: [
{
loader: 'css-to-string-loader', // creates style nodes from JS strings
},
{
loader: 'css-loader', // translates CSS into CommonJS,
options: { url: false },
},
{
loader: 'less-loader', // compiles Less to CSS
}],
},
];
Below is the .babelrc in a project.
function istanbulHacks() {
return {
inherits: require("babel-plugin-istanbul").default,
};
}
const config = {
plugins: [
"#babel/plugin-syntax-dynamic-import",
"transform-decorators",
["transform-class-properties", { "loose": true }],
"transform-es2015-modules-commonjs",
["transform-es2015-template-literals", { "loose": true }],
],
presets: [
"typescript"
],
};
if (process.env.BABEL_ENV === "test") {
config.auxiliaryCommentBefore = "istanbul ignore next";
config.plugins.push(istanbulHacks);
}
module.exports = config;
Everything works fine without using the package written in ES6.
UPDATE
If I change "main" in package.json of #ui/base to
"main": "./target/package/#eui/base/0/Main.js",
then it works. Actually, "main" is point to "./src/index.js".
I am confused here as well. Why does "main" not point to the build version of a package ?
How to resolve this issue ? Is there any version incompatibility with babel or webpack ? Why I am not getting built version of npm package written in ES6 ?
Couple options:
Are we sure the import is correct? usually if its npm, there will be es5 code in the package. I see that your import is from /#ui/base/src I've see src contain es6 files, while another directory contains the transpiled es5 code, perhaps lib, or dist. Can you check the node_modules folder to see whats in ui/base?
You can tell webpack to parse ui/base, right now, your webpack will exclude node_modules thats good, you can also tell webpack to include the es6 code. Then it will get transpiled along with your source code.
Quick example of #2:
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
https://webpack.js.org/configuration/
IM SO FRUSTRATED RIGHT NOW, ive spent a whole day trying to get webpack to work, but every tutorial or documentation is terrible..it shouldnt be this hard..whats the point of these packages if they actually make you spend more time trying to configure them then saving time.
I just want the live reload to work. I've tried the inline method, iframe, hot module, the middleware with express. None of it works...Im using Node.js on atom, with safari browser.
I want it to work with express.
Can someone point me to a good tutorial...or explain step by step very simply..
Need help. please. no one every replies on these things! Thank you
GITHUB REPO LINK
webpack.config.js
const nodeExternals = require('webpack-node-externals');
module.exports =
{
entry: './app.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js',
},
devServer: {
port: 8000,
open: true,
inline: true
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
package.json
{
"name": "clinic8beauty",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"b": "webpack",
"s": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"es2015"
]
},
"author": "Kosta Pontidas",
"license": "ISC",
"dependencies": {
"body-parser": "^1.17.1",
"events": "^1.1.1",
"express": "^4.15.2",
"jquery": "^3.2.1",
"pug": "^2.0.0-beta.12",
"twilio": "^2.11.1",
"validator": "^7.0.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"node-sass": "^4.5.2",
"pug-html-loader": "^1.1.4",
"sass-loader": "^6.0.3",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4",
"webpack-hot-middleware": "^2.18.0",
"webpack-node-externals": "^1.5.4"
}
}
app.js requires
const express = require('express'),
app = express(),
events = require('events'),
eventEmitter = new events.EventEmitter(),
bodyParser = require('body-parser'),
validator = require('validator'),
client = require('twilio')('AC3cdbdc7ecb720d5521f41243450343e8',
'8f76c52d839dc25aa17ddc72b3b9d781');
You have target node in your config change it to web or remove it as default is web. It should fix your problem.
Can you try the following?
const nodeExternals = require('webpack-node-externals');
const path = require('webpack'); // <== added
module.exports =
{
entry: './app.js',
// target: 'node', <== deleted
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'dist'), //<== added
filename: 'app.bundle.js'
},
devServer: {
port: 8000,
open: true,
inline: true,
contentBase: [path.resolve(__dirname, 'dist')/* add other directories if needed */]
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
And run webpack-dev-server --progress instead of just webpack to start the server
Why not use nodemon globally and webpack to compile