Webpack

搭建开发环境

问题:之前改代码,需重新打包才能运行查看,效率很低

开发环境:配置webpack-dev-server快速开发应用程序

文档:开发环境 | webpack 中文文档

作用:启动Web服务,自动检测代码变化,热更新到网页

注意:dist目录和打包内容是在内存里(更新快)

步骤:

1.下载webpack-dev-server软件包到当前项目

复制代码
npm i webpack-dev-server --save-dev

2.在webpack.config.js文件中设置模式为开发模式

在package.json文件中配置自定义命令

3.使用npm run dev来启动开发服务器,试试热更新效果

webpack-dev-server借助http模块创建8080默认Web服务

默认以public文件夹作为服务器根目录,去显示里面名字为index的网页,如果没有该网页,则会显示成如上图,所以要加具体名称去访问页面

问题:没有css样式和js效果

解决:webpack-dev-server根据配置,打包相关代码在内存当中,以output.path的值作为服务器根目录,所以可以直接自己拼接访问dist目录下内容

打包之后自动打开某页面:在public文件夹下新建index.html文件

打包模式

打包模式:告知Webpack使用相应模式的内置优化

分类:

设置:

方式1:在webpack.config.js配置文件设置mode选项

方式2:在package.json命令行设置mode参数

注意:命令行设置的优先级高于配置文件中的,推荐使用命令行设置

优化:把main.css打包进login文件夹中

解决:在webpack.config.js文件中找到MiniCssExtractPlugin添加如下代码,路径一定要写相对路径,否则会报错

相关推荐
云枫晖20 小时前
Webpack系列-Output出口
前端·webpack
云枫晖2 天前
Webpack系列-Entry入口
前端·webpack
one.dream3 天前
用webpack 插件实现 img 图片的懒加载
前端·webpack·node.js
云枫晖4 天前
Webpack系列-编译过程
前端·webpack
wyzqhhhh6 天前
webpack
前端·javascript·webpack
吃饺子不吃馅8 天前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack
萌萌哒草头将军8 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_405023378 天前
webpack 学习
前端·学习·webpack
八月ouc10 天前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
街尾杂货店&10 天前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack