02day-webpack
2024-10-19 00:31:46
<!--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标签 并且引入正确的路径
-->
最新文章
- JS判断用户手机是IOS还是Android
- Mysql主数据库+备份数据库部署教程
- leetcode 198
- VQuery选择器
- sbt的安装设置
- 李洪强iOS开发之【零基础学习iOS开发】【02-C语言】08-基本运算
- 使用SQLdiag Utility搜集SQL Server诊断信息
- SPRING IN ACTION 第4版笔记-第八章Advanced Spring MVC-001- 配置SpringFlow(flow-executor、flow-registry、FlowHandlerMapping、FlowHandlerAdapter)
- Ubuntu下安装PAC Manager
- 5阻止A默认行为和JS实现页面跳转的方法
- Study notes for B-tree and R-tree
- SO_REUSEADDR 套接字选项应用
- JAVA 编码解码
- linux中sed在指定字符前后添加内容
- 聊聊Docker
- WPF TextBlock IsTextTrimmed 判断文本是否超出
- poj1182、hdu1829(并查集)
- 使用gdbserver远程调试
- B-树(B+树) 学习总结
- 【C语言】练习1-20