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>

 

 

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。


作者：晚来南风晚相识​

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。