05webpack中html-webpack-plugin的2个作用

复制代码
  <!-- 15  html-webpack-plugin的2个作用
     下载 cnpm i html-webpack-plugin -D   作用在==>内存中生成页面
     可以在package.json中去查看是否有

     在webpack中 导入在内存中生成的HTML页面的插件
     // 只要是webpack的插件 都要放入 plugins 这个数组中去
     const htmlwebpackPlugin=require("html-webpack-plugin")
     

    plugins: [
    new webpack.HotModuleReplacementPlugin(), //这是热跟新的配置

    new htmlwebpackPlugin({ //创建一个 在内存中生成 HTML页面的插件
        template:path.join(__dirname,'./src/index.html'), //指定模板页面，将来会根据指定的页面路径，去生成内存中的 页面
        filename:"index.html" //指定生成的页面名称
    })
    ]
  
    //

    当我们使用html-webpack-plugin之后，我们不需要手动处理bundle.js的引用路径，
    （我们可以将index.html中的 <script src="../dist/bundle.js"></script>注释掉 ）
     因为这个插件，已经帮我们自动创建一个 合适的script,, 并且引用了正确的路径 
     
     这个插件有两个作用的
     在内存中帮我们生成一个页面
     帮我们自动创建一个合适的script标签  并且引入正确的路径

运行的命令  npm  run  dev
复制代码

 

完整代码

 package.json

复制代码
{
  "devDependencies": {
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "dependencies": {
    "jquery": "^3.5.1"
  }
}
复制代码

 

src下的main.js

import $ from "jquery";
$(function () {
  console.log("我是重新删除了哈");
  console.log("哈在手我的删除动阀案说现在辞职 法十分哈儿");
});

 

webpack.config.js

复制代码
const path = require("path");
const htmlwebpackPlugin = require("html-webpack-plugin");
var webpack = require("webpack");
module.exports = {
  entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件
  output: {
    //输出相关的配置
    path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录（dist)下去
    filename: "testindex.js", //指定打包好的文件的名称叫什么名字
  },
 
  plugins: [
    new webpack.HotModuleReplacementPlugin(), //这是热跟新的配置

    new htmlwebpackPlugin({
      //创建一个 在内存中生成 HTML页面的插件
      template: path.join(__dirname, "./src/index.html"), //指定模板页面，将来会根据指定的页面路径，去生成内存中的 页面
      filename: "index.html", //指定生成的页面名称
    }),
  ],
};
复制代码

 

src下的index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="/testindex.js"></script>   注释了--> 
</head>

<body>
 
    <div>12</div>
    <div>222</div>
    <div>222</div>
</body>
</html>
 
复制代码

 

posted @   南风晚来晚相识  阅读(277)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示
❉
❉