<!--14 第一种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新 这种是在webpack.json中去配置的 直接在package中 写 将“script”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令 -->   <!-- 第二种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新 在webpack.config.js文件中

第一步：引入webpack const webpack=require("webpack");

第二步:配置 devServer:{ open:true,//自动打开浏览器 port:3000,// 端口号 contentBase:'src',// 指定托管的跟目录 hot:true //启动热刷新 }

第三步：配置热刷新这个插件的节点 plugins: [new webpack.HotModuleReplacementPlugin()]   完整代码如下===》 const path = require("path"); //路径模块 //第2中方式配置webpack const webpack = require("webpack"); // 配置文件 暴露出去哦 // 手动的指定入口和出口 module.exports = { entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件 output: { //输出相关的配置 path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录（dist)下去 filename: "bundle.js" //指定打包好的文件的名称叫什么名字 }, devServer: { open: true, //自动打开浏览器 port: 3000, //端口号 contentBase: "src", hot: true }, plugins: [new webpack.HotModuleReplacementPlugin()] }; -->   <!-- 15 html-webpack-plugin的2个作用 下载 cnpm i html-webpack-plugin -D 作用在==>内存中生成页面

在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标签 并且引入正确的路径 -->

转载于:https://www.cnblogs.com/IwishIcould/p/11094620.html

原文链接：https://blog.csdn.net/weixin_30342827/article/details/97768313

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。