I just spent five frustating hours trying to get webpack working. And it never did.
I'm struggling to produce a reusable js library with webpack. This is my first attempt. Here are the relevant files:
The package.json
{
"name": "makelab-lib",
"version": "0.0.1",
"description": "A library for the Makeability Lab",
"main": "dist/makelab.bundle.js",
"author": "Jon E. Froehlich",
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.4",
"babel-loader": "^9.2.1",
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.1.0"
},
"scripts": {
"build": "webpack",
"start": "webpack serve --open"
}
}
The webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/lib/makelab-index.js', // Adjust this path to your main entry file
resolve: {
alias: {
'@lib': path.resolve(__dirname, 'src/lib'),
'@graphicslib': path.resolve(__dirname, 'src/lib/graphics'),
'@mathlib': path.resolve(__dirname, 'src/lib/math'),
'@apps': path.resolve(__dirname, 'src/apps'),
'@dist': path.resolve(__dirname, 'dist')
},
},
output: {
path: path.resolve(__dirname, 'dist'), // Output directory
filename: 'makelab.bundle.js', // Output file names
// library: {
// name: "makelab",
// type: "umd",
// },
// globalObject: 'this',
},
mode: 'development',
//mode: 'production',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devServer: {
static: [
{
directory: path.join(__dirname, 'src/apps'),
publicPath: '/apps',
},
{
directory: path.join(__dirname, 'dist'),
publicPath: '/dist',
}
],
compress: true,
port: 9000,
open: true,
hot: true,
},
};
Here's the makelab-index.js (very simple for now with just exporting Vector):
window.globalVariable = 'some value';
export { Vector } from '@mathlib/vector.js';
A simple test app in /src/apps/math/VectorTests with an index.html and sketch.js:
<!DOCTYPE html>
<html>
<head>
<title>Vector Test Results</title>
</head>
<body>
<div id="test-results"></div>
<script src="/dist/makelab.bundle.js"></script>
<script type="module" src="sketch.js"></script>
</body>
</html>
And here's the sketch.js:
import { Vector } from '/dist/makelab.bundle.js';
function testVector(testName, expectedResult, actualResult) {
const result = expectedResult === actualResult;
console.log(`${testName}: ${result ? 'PASSED' : 'FAILED'}`);
if (!result) {
console.log(` Expected: ${expectedResult}`);
console.log(` Actual: ${actualResult}`);
}
}
// Basic arithmetic tests
testVector('Vector addition', new Vector(3, 4), new Vector(1, 2).add(new Vector(2, 2)));
testVector('Vector subtraction', new Vector(1, 2), new Vector(3, 4).subtract(new Vector(2, 2)));
testVector('Vector multiplication', new Vector(2, 4), new Vector(1, 2).multiply(2));
testVector('Vector division', new Vector(0.5, 1), new Vector(2, 4).divide(4));
After running npm run build, I try to load VectorTests' index.html page in Chrome, I get:
Uncaught SyntaxError: The requested module '/dist/makelab.bundle.js' does not provide an export named 'Vector' (at sketch.js:2:10)
I just spent five frustating hours trying to get webpack working. And it never did.
I'm struggling to produce a reusable js library with webpack. This is my first attempt. Here are the relevant files:
The package.json
The webpack.config.js:
Here's the makelab-index.js (very simple for now with just exporting Vector):
A simple test app in /src/apps/math/VectorTests with an index.html and sketch.js:
And here's the sketch.js:
After running
npm run build, I try to load VectorTests' index.html page in Chrome, I get: