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!')