<!-- 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>
