I'm trying to make a simple application where I use Webpack and babel. Down below you could find the code that I've writed... Unfortunately ,launching npm run start, from the browser console does not give me any error and the file (index.js) does not work;
package.json:
"scripts": {
"start": "webpack serve",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
That's HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas</title>
</head>
<body>
<div id="root" ></div>
<script type="text/js" src="../src/index.js" ></script>
</body>
</html>
Babel:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
}
}
]
]
}
Webpack:
// Plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
// Main
mode: 'development',
devtool:'inline-source-map',
entry: './src/index.js',
output:{
path: path.resolve(__dirname,'./dist'),
filename: 'main.bundle.js',
clean:true,
},
// Loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
"presets":['@babel/preset-env']}
}
},
{
test:/\.css$/,
use:['style-loader','css-loader'],
}
]},
// HTML
plugins:[new HtmlWebpackPlugin({
filename:'main.bundle.html',
template:path.join(__dirname,'public','index.html'),
})],
// Development Server
devServer:{
hot:true,
open:true,
port:8080,
compress:true,
liveReload:true,
}
};
index.js:
alert('hello world!');
console.log('hello world!')
You should remove the script tag (<script type="text/js" src="../src/index.js" ></script>) in your index.html since HTMLWebpackPlugin is responsible for injecting it in your HTML file. Bundling it with Webpack you are also renaming it in main.bundle.js (in your output configuration).