Estoy tratando de hacer una aplicación simple donde uso Webpack y babel. A continuación, puede encontrar el código que he escrito ... Desafortunadamente, al iniciar npm run start desde la consola del navegador no me da ningún error y el archivo (index.js) no funciona;
paquete.json:
"scripts": { "start": "webpack serve", "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" },Ese es el código HTML:
<!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" } } ] ] }paquete web:
// 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, } };índice.js:
alert('hello world!'); console.log('hello world!')Debe eliminar la etiqueta del script ( <script type="text/js" src="../src/index.js" ></script> ) en su index.html ya que HTMLWebpackPlugin es responsable de inyectarlo en su archivo HTML . Al agruparlo con Webpack, también lo está renombrando en main.bundle.js (en su configuración de salida).