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.
Related
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.
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?
I am practicing on the webpack project. I got the error while I am importing the img file. I am new for webpack. I have installed the "image-webpack-loader" but still got the error.
Here is the webpack.config.js code
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
},
{
loader: ExtractTextPlugin.extract({
loader: 'css-loader'
}),
test: /\.css$/
},
{
test: /\.(jpe?g | png | gif |svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 40000
}
},
'image-webpack-loader'
]
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
]
};
module.exports = config;
And Here is the image_viewer.js file
import '../assets/big.jpg';
import '../assets/small.jpg';
import '../styles/image_viewer.css';
const image = document.createElement('img');
image.src = 'http://lorempixel.com/400/400';
document.body.appendChild(image);
I can't find the solution for this issue. You can see the issue. The style.css and build.js is properly bundled but when I work for image it does not work got some error which I have mentioned below.
> webpack
keywords if/then/else require v5 option
Hash: 5ba37842c394273b5247
Version: webpack 2.2.0-rc.0
Time: 2330ms
Asset Size Chunks Chunk Names
bundle.js 4.38 kB 0 [emitted] main
style.css 41 bytes 0 [emitted] main
[0] ./src/image_viewer.js 452 bytes {0} [built]
[1] ./src/sum.js 177 bytes {0} [built]
[2] ./assets/big.jpg 235 bytes {0} [built] [failed] [1 error]
[3] ./assets/small.jpg 237 bytes {0} [built] [failed] [1 error]
[4] ./styles/image_viewer.css 41 bytes {0} [built]
[5] ./src/index.js 303 bytes {0} [built]
+ 1 hidden modules
ERROR in ./assets/small.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\small.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/image_viewer.js 7:13-43
# ./src/index.js
ERROR in ./assets/big.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\big.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/image_viewer.js 3:11-39
# ./src/index.js
Child extract-text-webpack-plugin:
[1] ./~/css-loader!./styles/image_viewer.css 204 bytes {0} [built]
+ 1 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! jsmodule#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the jsmodule#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Engraved\AppData\Roaming\npm-cache\_logs\2018-05-27T10_29_34_980Z-debug.log
My webpack version is "webpack": "^2.2.0-rc.0".
I have got the answer for this error. I have researched more and found the issue. It is the little issue by which I had mad.
The issue was that to add space to images extension which I have mentioned in the code. See below the line
test: /\.(jpe?g | png | gif |svg)$/
This line got mad me. You can not give the space between them.
test: /\.(jpe?g|png|gif|svg)$/ - This is the correct.
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?
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.