I have a small JS project compiled by webpack 5.26 with the following structure:
>dist
>src
>js
>classes
carousel.js
navBar.js
neso.src.js
>scss
When running npm run watch, changes made in navBar.js or carousel.js are not outputted after the initial build. Changes made in files in the scss folder and neso.src.js are outputted.
Command line output on these occurances looks like this:
assets by status 72.1 KiB [cached] 1 asset
cached modules 56.1 KiB (javascript) 997 bytes (runtime) [cached] 16 modules
webpack 5.26.0 compiled successfully in 131 ms
I've tried adding the watchOptions property and changing the entry property value in my webpack.config.js. I've also tried changing the import/export declarations in neso.src.js but nothing helped and changes in classes files still aren't being output on watch. Please can you advise how to achieve this.
package.json
{
"name": "Neso-test",
"version": "0.0.1",
"description": "",
"private": true,
"main": "dist/neso.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack",
"build": "cross-env NODE_ENV=production webpack",
"watch": "cross-env NODE_ENV=development webpack --watch --progress",
"serve": "cross-env NODE_ENV=development webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"babel-loader": "^8.2.2",
"cross-env": "^7.0.3",
"css-loader": "^5.1.3",
"mini-css-extract-plugin": "^1.3.9",
"postcss": "^8.2.8",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.26.0",
"webpack-cli": "^4.5.0"
}
}
webpack.config.json
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
module.exports = {
mode: mode,
entry: path.resolve(__dirname, "src/js/neso-src.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "neso.js",
library: "Neso",
libraryTarget: "umd",
},
devtool: "source-map",
devServer: {
contentBase: "./dist"
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.(s[ac]|c)ss$/i, // This regex adds support for .scss, .sass and .css file types
use: [
mode === 'development' ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader"
],
}
],
},
plugins: [
new MiniCssExtractPlugin()
],
watchOptions: {
aggregateTimeout: 200,
poll: 1000,
},
}
The code in neso-src.js had this import statement:
import NavBar from './classes/NavBar.js';
and the referenced filename was actually navBar.js.
Changing the import statement to import NavBar from './classes/navBar.js'; worked and changes in that file now trigger a recomplile. (Uppercase 'N' to lowercase 'n').
Real credit goes to this answer which pointed me in the right direction.
Related
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 have already done some research and tried different configurations of webpack. However, webpack won't compile my ES5+ code to ES5. In my node_modules directory I have a bunch of babel directories:
babel-preset-env
babel-preset-es2015
babel-core
babel-helpers
babel-helper-{lotsOfDifferentDirectories}
babel-plugin-{lotsOfDifferentDirectories}
#babel
#babel/core
#babel/preset-env
and many many more...
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: "./_assets/js/src/example.js"
},
mode: "development",
output: {
path: path.resolve(__dirname, "_assets/js/build"),
filename: "exampleBundle.js"
},
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["#babel/preset-env"]
}
}]
}
}
package.json
{
"name": "jkk-onepager",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "http://10.8.1.1:850/root/jkk-onepager.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"webpack": "^4.29.6",
"webpack-dev-server": "^3.2.1"
},
"devDependencies": {
"babel-preset-env": "^1.7.0",
"webpack-cli": "^3.2.3"
}
}
src/example.js
let testArray = [1,2,3,4,5];
testArray.forEach( item => {
console.log(item);
})
part of exampleBundle.js
/***/ "./_assets/js/src/example.js":
/*!***********************************!*\
!*** ./_assets/js/src/example.js ***!
\***********************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("var testArray = [1, 2, 3, 4, 5];\ntestArray.forEach(function (item) {\n console.log(item);\n});\n\n//# sourceURL=webpack:///./_assets/js/src/example.js?");
/***/ })
/******/ });
Console output after I run npm run build
Hash: 70c0ea4134e6e46211b5
Version: webpack 4.29.6
Time: 896ms
Built at: 2019-03-21 11:28:05
Asset Size Chunks Chunk Names
exampleBundle.js 3.94 KiB app [emitted] app
Entrypoint app = exampleBundle.js
[./_assets/js/src/example.js] 93 bytes {app} [built]
Has somebody else faced this issue before? I have tried out every suggestion I could find in articles about this issue, but it didn't help. Any idea how to fix this?
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!
The case is to have main folder 'Projects' and installed there all webpack 4 files with configs. Inside the 'Projects' folder are many folders like 'Project1', 'Project2', etc...I want to start from 'node_modules' entry point where webpack.config.js is and customize there further entry points like ./Project1/js/app.jsx, outputs like ./Project1/dist/js/main.js, same with scss and index.html, all generated in 'dist' folder. The thing is to have always only once installed node_modules in main 'Projects' folder.
the package.json:
{
"name": "webpack4_example",
"version": "1.0.0",
"main": "index.js",
"browserslist": ["last 2 versions"],
"scripts": {
"build": "webpack --mode production",
"watch": "webpack --watch --mode development",
"start": "webpack-dev-server --open --mode development"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
}
}
webpack.config.js:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './Project1/js/app.jsx', // customized entry point
output: {
path: path.resolve(__dirname, 'dist'),
filename: './js/out.js' // generated ./Project1/dist/js/out.js
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: 'url-loader',
options: {
name: './img/[name].[ext]',
limit: 10000
}
},
{
loader: 'img-loader'
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './Project1/index.html', // not sure how to set these sections
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
};
.babelrc:
{
"presets": ["env", "react", "stage-2"]
}
From what I understand without customized entry points webpack as default will search for 'Projects/src/...' for all files like scss, js, img, index.html, index.js to operate on them and will generate the 'Projects/dist' folder with all files generated.
The configuration form above compiles without errors but doesn't generate the 'dist' folder anywhere so I'm not sure the compile process is done properly anyway.
Would appreciate any suggestions and solutions
SOLUTION (updated: added working watching files):
ok, I've managed to get it work (starting point is where node_modules and other webpack4 config files are installed, here in Projects main folder)
Projects
|__Project1
| |__js
| | |__app.jsx
| |__dist //desirable result, generated dist folder
| | |__* //all generated folders/files html, js, css, img
| |__index.ejs //renamed from index.html
|
|__Project2 //etc, project folders
|
|__src // if without customized entry points it's default source
| |__folders like /_scss, /img, /js
| |__index.js
| |__index.ejs //renamed index.html, used when no customized
| //entry points are set, same as for all /src
|
|__node_modules
|__.babelrc
|__package.json
|__webpack.config.js
.babelrc
unchanged and same as above in previous post
in this example in Projects folder normally is created src folder with all files/folders to pass thru webpack4, in /src/index.js file must be present, it's for importing some other files
example of index.js
import style from "./_scss/main.scss"; //paths for Projects/src/...
import style from "./main.css";
package.json
{
"name": "webpack4_example",
"version": "1.0.0",
"main": "index.js", // the file explained just above
"browserslist": ["last 2 versions"],
"scripts": {
"dev": "webpack --mode development ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
"build": "webpack --mode production ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
"watch": "webpack --watch --mode development",
"start": "webpack-dev-server --mode development --open --watch-content-base ./Project1/js/app.jsx" //watching desired files changes live in browser
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
}
}
where --mode production | developement | none means formatting optimizations for the output files in dist folder or none of such optimizations, for readibility use none
webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(js$|jsx$)/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.(png|jpe?g)/i,
use: [
{
loader: 'url-loader',
options: {
name: './img/[name].[ext]',
limit: 10000
}
},
{
loader: 'img-loader'
}
]
},
{
test: /\.(css$|scss$)/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './Project1/index.ejs', // entry point for html
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
watchOptions: { //added to make possible watch files
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
}
};
the customized entry point for index.html where .html extension is changed to .ejs as for working around some issues caused between html-loader and html-webpack-plugin. With .ejs the output html, also placed in dist folder automatically, isn't optimized with formatting and is readible. Watch out if html.ejs contains tag with pinned path for [out].js file (here the one generated in dist folder). The generated index.html from dist folder will add another such line so it will be doubled -> line to delete.
for run use: npm run build, npm start
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/