webpack5-[html-webpack-plugin]的使用

webpack5-[html-webpack-plugin]的使用

---

一、为什么要用 html-webpack-plugin 插件，这个插件有什么用？

html-webpack-plugin 插件可以在内存中生成 html 文件
html-webpack-plugin 插件可以在生成的文件中自动帮我们导入合适的js文件

二、步骤

1. 初始化

   npm init -y
   

2. 安装

   npm i webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
   

3. 拉取jQuery

   npm i jquery -d
   

4. 编写js文件

   import $ from 'jquery'
   $(function () {
       $('li:odd').css("color", "pink")
       $('li:even').css("color", "skyblue")
   })
   

   

5. 编写html文件

   <ul>
       <li>这是第1个li</li>
       <li>这是