As someone who is new to webpack, I have successfully used the quick start guide to process a simple JS file from src to dist. Everything was working fine.
However, I encountered an issue when trying to process more than one JS file. The original tutorial file is still processed correctly and appears in the dist folder. However, a newly created JS file that I added only creates an empty file in the dist folder, without actually minifying the JS.
So, while /dist/scripttwo.js is generated properly, /dist/scriptone.js remains an empty file.
This is my webpack configuration:
const path = require('path');
module.exports = {
entry: {
scriptone: './src/scriptone.js',
scripttwo: './src/scripttwo.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
};
Content of scriptone.js:
function sayhello() {
return 'hello again';
}
Content of scripttwo.js:
import _ from 'lodash';
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());