Estoy usando html-webpack-plugin .
Según la documentación, la etiqueta del script debe agregarse en el cuerpo.
Pero en mi caso, se agrega en el encabezado.
Mi estructura de carpetas:
│ package-lock.json │ package.json │ webpack.config.js │ ├───dist │ index.html │ main.js │ ├───node_modules │ │ .package-lock.json │ └─── And many more files │ └───src │ index.html │ └───scripts index.js Mi webpack.config.js :
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/scripts/index.js', plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] } Salida dist/index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack Demo</title> <script defer src="main.js"></script></head> <body> <h1>Webpack Demo</h1> </body> </html>El comportamiento es el mismo que en el primer ejemplo de uso de la documentación, por lo que la etiqueta del script se agrega en el encabezado de forma predeterminada. La secuencia de comandos aún se carga solo después de que se haya analizado el HTML, ya que la etiqueta de la secuencia de comandos tiene el atributo defer , por lo que no debería haber ningún problema con ella. Pero si aún desea que se agregue la etiqueta del script al final del cuerpo, puede usar la opción de inject . Consulte la documentación para obtener más detalles.
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/scripts/index.js', plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', inject: 'body' }) ] }