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>这是第2个li</li>
   <li>这是第3个li</li>
   <li>这是第4个li</li>
   <li>这是第5个li</li>
   <li>这是第6个li</li>
   <li>这是第7个li</li>
   <li>这是第8个li</li>
   <li>这是第9个li</li>
   <li>这是第10个li</li>
   </ul>

   

6. 在package.json文件中添加

   "dev": "webpack-dev-server"

   

7. 编写配置文件 webpack.config.js

   const path = require('path')
   const webpack = require('webpack')
   const htmlwebpackplugin = require('html-webpack-plugin')    // 引入html-webpack-plugin插件
   
   module.exports = {
   entry: path.join(__dirname, './src/js/index.js'),
   output: {
   path: path.join(__dirname, './dist'),
   filename: "index.js"
   },
   mode: "development",
   devServer: {
   open: true,
   port: 3000,
   contentBase: "src",
   hot: true
   },
   plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new htmlwebpackplugin({     // html-webpack-plugin 插件对象
   template: path.join(__dirname, './src/index.html'), // 指定模板文件
   filename: "index.html"  //设置内存中的文件名
   })
   ]
   }

   

8. 启动

   npm run dev

   

• 点赞
• 收藏
• 分享
• 文章举报