Develop Reference

Webpack 5 multiple javascript files produces 0 bytes bundle in production mode

I just need to minify and bundle all my js files into one file. So prepared a simple configuration as;
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
resolve: {
extensions: ['.js']
},
entry: [
'./src/main/resources/static/js/app/context.js',
'./src/main/resources/static/js/app/pagemanager.js'
],
plugins: [
new CleanWebpackPlugin()
],
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}
};
but if I execute webpack --mode production it produces 0 bytes and bundle.js is empty
asset bundle.js 0 bytes [emitted] [minimized] (name: main)
./src/main/resources/static/js/app/context.js 9.74 KiB [built] [code generated]
./src/main/resources/static/js/app/pagemanager.js 27.9 KiB [built] [code generated]
webpack 5.20.2 compiled successfully in 299 ms
but with webpack --mode development it creates a file that contains js code.
What may be the reason leading to this? Thank you.

I think that if your file don't have any code to execute, such as
// just define a var
const foo = 1;
// or just a string
"console.log('something');"
and the webpack mode is "production"(if you don't set it, the default value is this),the result will be empty, asset main.js 0 bytes.
The solution is changing the code to this.
console.log('something');

Answering my question for those who is facing the same problem,
There should be "export" syntax, that refers what you export from these js files to solve this problem.

webpack splitChunks: how do I merge dependencies into a named chunk?

Suppose you have a project below:
package.json
{
"name": "webpack-test-repo",
"main": "index.js",
"dependencies": {
"define-properties": "^1.1.3"
},
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
}
}
index.js
// dynamically load the 'define-properties' module.
import('define-properties');
webpack.config.js
module.exports = {
mode: 'production',
entry: './index.js',
output: {
chunkFilename: '[name].js',
},
optimization: {
splitChunks: {
minSize: 0, // <- just to demonstrate the situation with small packages
cacheGroups: {
defineProperties: {
test: /node_modules\/define-properties\//,
name: 'define-properties',
},
},
},
},
};
Note that the imported module define-properties has a single dependency object-keys.
I configured splitChunks in webpack.config.js so that contents of define-properties are split into define-properties.js.
The result of running webpack is as follows:
$ npx webpack
Hash: 7d9500fb0e6bfd1e32d1
Version: webpack 4.20.2
Time: 127ms
Built at: 2018-10-08 03:25:47
Asset Size Chunks Chunk Names
main.js 2.05 KiB 0 [emitted] main
define-properties.js 754 bytes 1 [emitted] define-properties
2.js 2.08 KiB 2 [emitted]
Entrypoint main = main.js
[0] ./index.js 81 bytes {0} [built]
+ 3 hidden modules
Here we get three output files: main.js for the content of index.js, define-properties.js for the define-properties module, and 2.js for the object-keys module.
Question:
I want the chunk for object-keys to be merged into define-properties because it is only used by define-properties.
In other words, I want to pack define-properties and its dependencies into one named chunk by only specifying the parent module.
Although test: /node_modules\/(?:define-properties|object-keys)\// works for this example, I don't want to list all (potentially many) dependencies of define-properties.
How do I configure webpack to achieve it?

Why does webpack build global.js?

I'm getting started with webpack, and on my first build I noticed that the output included a default file was included (index 1):
build.js 222 kB 0 [emitted] main
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./source/scripts/main.js 105 bytes {0} [built]
+ 4 hidden modules
Why is this file being included? I don't have any dependencies that would require anything close to the amount of code that comes out in my build.js file. I was expecting to have maybe 10 lines of code in the output, instead I have 8000.
I've also noticed some other projects out there don't have this file listed in the output. Is this strictly necessary? I can't even find it in the docs.
For reference, my webpack.config.js file:
'use strict';
module.exports = {
entry: './source/scripts/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/
}
]
}
}

I had the same issue. It turned out that I was importing something from node_modules accidentally.
In typescript:
import Util from 'Util';
should have been
import Util from './Util';
since the first one loaded a 'Util' from node modules instead of my local file. The 'exclude: /node_modules/' doesn't seem to matter. I had the equivalent in my tsconfig. Maybe webpack should warn if you import something that's excluded.

Using webpack-dev-server and Hot Module Replacement not updating bundle.js with changes to JS or SCSS files

I am using an npm script npm start to run webpack-dev-server --progress --colors --hot --inline --open in the Terminal. My React app loads up fine on the local server. But when I make any SCSS changes for example I see:
webpack: bundle is now INVALID.
Hash: 619812c0fa6ffc42708e
Version: webpack 1.13.3
Time: 343ms
Asset Size Chunks Chunk Names
bundle.js 1.02 MB 0 [emitted] main
0.065f433e5a1a691720c9.hot-update.js 659 bytes 0 [emitted] main
065f433e5a1a691720c9.hot-update.json 36 bytes [emitted]
chunk {0} bundle.js, 0.065f433e5a1a691720c9.hot-update.js (main) 946 kB [rendered]
[249] ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss 586 bytes {0} [built]
+ 251 hidden modules
webpack: bundle is now VALID.
However, the page doesn't reflect any SCSS or JS changes I make. My bundle.js is not updated at all. However, if i run webpack in another Terminal window my bundle.js updates and then if I refresh my page I can see my changes.
Here is my webpack.config.js:
var webpack = require("webpack");
module.exports = {
entry: "./src/main.js",
output: {
path: "./build/scripts",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.jsx?$/,
loader: "babel",
exclude: "./node_modules"
},
{ test: /\.scss$/,
loaders: [ "style", "css?sourceMap", "sass?sourceMap" ]
}
],
}
};
Here is my main.js file:
import React from "react";
import ReactDOM from "react-dom";
// CSS
import "./styles/main.scss"
let docBody = "Webpack is doing its thing, with ES2015!!";
document.write(docBody);
Any idea what I'm doing wrong here?

Empty wepback output file with express and react

I'm trying to convert the basic react comment list tutorial to use webpack and things seem to be working, but my output file doesn't ever get populated with anything.
Here's my webpack config:
module.exports = {
context: __dirname + "/app",
entry: "./entry.js",
output: {
path: __dirname + "/public",
filename: "bundle.js",
publicPath: "/ "
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' },
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules|bower_components/,
query: {
presets: ['react']
}
}
]
}
}
Here's some relevant parts of the server supplied by the tutorial that I modified to try and add webpack:
const webpackMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config');
const app = express();
const compiler = webpack(config);
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(webpackMiddleware(compiler));
When I run the server file it looks like webpack runs, finds my entry.js file and starts building everything the way I would expect:
Server started: http://localhost:3000/
Hash: 8541f0bf4ae3ae4162c1
Version: webpack 1.12.9
Time: 949ms
Asset Size Chunks Chunk Names
bundle.js 680 kB 0 [emitted] main
chunk {0} bundle.js (main) 646 kB [rendered]
[0] ./app/entry.js 249 bytes {0} [built]
[1] ./~/react/react.js 56 bytes {0} [built]
[2] ./~/react/lib/React.js 1.49 kB {0} [built]
[3] ./~/react/lib/ReactDOM.js 3.71 kB {0} [built]
...
[161] ./app/comment-form.js 1.28 kB {0} [built]
webpack: bundle is now VALID.
But my output file bundle.js remains empty. I'm not seeing any errors on the server, the api and public http request are all working appropriately. I think that I've got something messed up in the way that webpack is expecting the node / express stuff to be interacting with the way I'm expecting the front end files to be bundled up together. Help!

Whether through webpack/webpack-dev-server or when you use webpack/webpack-dev-middleware directly in your Express application, the Webpack compiler's file system will be replaced with an in-memory file system.
If you use webpack-dev-middleware, files are resolved from the in-memory file system exclusively. With webpack-dev-server, or when you add the static middleware yourself manually, assets created during compilation are written to the in-memory file system and take precedence over whatever exists in the output directory on disk. This is why you may see that output/foo.png is read from disk, but the empty output/bundle.js is showing fresh, correct chunk content.