El curso es realmente bastante explicativo, pero hay ciertos trucos que no te enseña y terminan siendo realmente útiles a la larga, en este caso HtmlWebpackPlugin es sin dudas una de las cosas mas útiles y simples de usar que te vas a topar.
¿Qué hace este plugin? Pues carga dinamicamente nuestras hojas de estilo y bundles de JS automáticamente cuando hacemos nuestro build. El el curso normalmente lo cargábamos a mano y no era gran problema porque usabamos solo el nombre, pero cuando empiezas a usar comodines de [hash] y demás, los nombres pueden cambiar entre build y build, y pues terminarás queriendo arrancarte los pelos por tener que andar cambiando a mano todo.
Y cito al instructor: developer experience
Para usarlo pirmero tenemos que instalarlo:
npm i -D html-webpack-plugin
Luego, pues, lógicamente hay que importarlo:
const HtmlWebpackPlugin = require('html-webpack-plugins')
Y para usarlo, como ya deberías saber si estás leyendo esto, debes incluirlo en el array de plugins (voy a omitir toda la parafernalia anterior y solo enfocarme en el plugin):
plugins: [new HtmlWebpackPlugin()]
De ese modo anterior simplemente va a insertar automaticamente las etiquetas <script/> y <link/>.
Esto nos vendría bien para ciertas cosas, pero cuando trabajamos co React.js, por ejemplo necesitamos tener algún componente ya creado con un id o una clase para poder decirle a React donde renderizar todo, y pues haciendolo del modo anterior no va a usar ningún template que tengamos sino que directamente va a generar un index.html por si solo… si quisíesemos usar un template, en ese caso tenemos la opción de hacerlo fácilmente:
plugins: [new HtmlWebpackPlugin({
template: 'public/index.html'
})]
Y con esto tendríamos lo más básico cubierto. PERO, tomen en cuenta que primero deben crear el mentado index.html en la carpeta public (o la que sea que quieran usar) y definir la ruta, así el plugin tomará como base el template que le han dado y sobre el insertará los scripts que genere el build y los estilos.
Por amor a la brevedad me detengo con esto, pero si tienen dudas o simplemente quieren saber mas les dejo el link a la documentación
Happy coding ❤️
Curso de Webpack 2017
