I have a very simple project I'm using to test out webpack. When running against my code, I get 2 output files, 0.bundle.js and bundle.js.
How do I prevent this and get webpack to only output a single js file?
Folder Structure
>- dist
>- node_modules
v- src
v- libs
BlackTriangle.js
app.js
index.html
main.js
package.json
webpack.config.js
webpack.config.js
var path = require("path"),
webpack = require("webpack");
module.exports = {
entry: "./src/main.js",
devtool: "source-map",
resolve: {
extensions: [ ".js", ],
modules: [ "node_modules", ],
alias: {
"BlackTriangle" : "./libs/BlackTriangle",
},
},
output: {
path: path.join(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["es2015"],
},
},
],
},
};
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Webpack Black Triangle</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" data-main="main" src="node_modules/requirejs/require.js"></script>
</head>
<body>
<div id="triangle" class="BlackTriangle">
<div class="BlackTriangle-inner"></div>
</div>
</body>
</html>
main.js
// Configure requirejs to work with external libraries
require.config({
//
baseUrl: "",
paths: {
"BlackTriangle" : "libs/BlackTriangle",
},
});
(function() {
"use strict";
// Call the main function when the page load has pleted
if (document.readyState == "plete") {
main();
}
else if (window.addEventListener) {
window.addEventListener("load", main, false);
} else if (window.attachEvent) {
window.attachEvent("onload", main);
}
else
{
var oldOnload = window.onload;
window.onload = function() {
oldOnload();
main();
};
}
function main() {
require([ './app' ], function(app) {
app.init();
});
}
})();
app.js
define((require) => {
'use strict';
return {
init: () => {
const BlackTriangle = require("BlackTriangle");
const triangle = new BlackTriangle('#triangle');
window.setInterval(
() => {
triangle.rotate(1);
triangle.render();
},
20
);
},
};
});
BlackTriangle.js
define((require) => {
const blackTriangle = function(selector) {
this.angle = 0;
this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
};
blackTriangle.prototype.rotate = function(amount) {
this.angle = (this.angle + amount) % 360;
};
blackTriangle.prototype.render = function() {
this.innerEl.style.transform = `rotate(${this.angle}deg)`;
};
return blackTriangle;
});
I have a very simple project I'm using to test out webpack. When running against my code, I get 2 output files, 0.bundle.js and bundle.js.
How do I prevent this and get webpack to only output a single js file?
Folder Structure
>- dist
>- node_modules
v- src
v- libs
BlackTriangle.js
app.js
index.html
main.js
package.json
webpack.config.js
webpack.config.js
var path = require("path"),
webpack = require("webpack");
module.exports = {
entry: "./src/main.js",
devtool: "source-map",
resolve: {
extensions: [ ".js", ],
modules: [ "node_modules", ],
alias: {
"BlackTriangle" : "./libs/BlackTriangle",
},
},
output: {
path: path.join(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["es2015"],
},
},
],
},
};
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Webpack Black Triangle</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" data-main="main" src="node_modules/requirejs/require.js"></script>
</head>
<body>
<div id="triangle" class="BlackTriangle">
<div class="BlackTriangle-inner"></div>
</div>
</body>
</html>
main.js
// Configure requirejs to work with external libraries
require.config({
//
baseUrl: "",
paths: {
"BlackTriangle" : "libs/BlackTriangle",
},
});
(function() {
"use strict";
// Call the main function when the page load has pleted
if (document.readyState == "plete") {
main();
}
else if (window.addEventListener) {
window.addEventListener("load", main, false);
} else if (window.attachEvent) {
window.attachEvent("onload", main);
}
else
{
var oldOnload = window.onload;
window.onload = function() {
oldOnload();
main();
};
}
function main() {
require([ './app' ], function(app) {
app.init();
});
}
})();
app.js
define((require) => {
'use strict';
return {
init: () => {
const BlackTriangle = require("BlackTriangle");
const triangle = new BlackTriangle('#triangle');
window.setInterval(
() => {
triangle.rotate(1);
triangle.render();
},
20
);
},
};
});
BlackTriangle.js
define((require) => {
const blackTriangle = function(selector) {
this.angle = 0;
this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
};
blackTriangle.prototype.rotate = function(amount) {
this.angle = (this.angle + amount) % 360;
};
blackTriangle.prototype.render = function() {
this.innerEl.style.transform = `rotate(${this.angle}deg)`;
};
return blackTriangle;
});
- There is no need for adding snippets for files that are not supposed to work together, especially with webpack that cannot run in the browser – Adam Wolski Commented Feb 1, 2017 at 22:53
- Have you cleaned the dist folder and run again the build? Does it still produce 2 files? – Adam Wolski Commented Feb 1, 2017 at 22:58
- Creating two output files should not even be possible. – ssc-hrep3 Commented Feb 1, 2017 at 22:59
- @AdamWolski Snippets were the easiest way. The code sample insert kept screwing with the formatting. (figured it out) I have cleaned the dist folder. The 0.bundle.js contains the contents of BlackTriangle.js and app.js while bundle.js only contains the webpack loader code and my main.js code. – Jeff Tillwick Commented Feb 1, 2017 at 23:00
- @ssc-hrep3 That post is specific about multiple output paths, not files (chunks). Webpack is outputting 2 different files (chunks) from the single entry point. – Jeff Tillwick Commented Feb 1, 2017 at 23:07
2 Answers
Reset to default 3You can force webpack to create only one chunk by using LimitChunkCountPlugin plugin:
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1, // disable creating additional chunks
})
],
Using define instead of require fix the problem on my project (thanks @GetFuzzy)
Before:
require(["jquery"], function($) {
...
});
After:
define(["jquery"], function($) {
...
});