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 @ 2019-08-29 23:15  南风晚来晚相识  阅读(270)  评论(0)  编辑  收藏  举报