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添加如下代码,路径一定要写相对路径,否则会报错

相关推荐
天蓝色的鱼鱼1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
西洼工作室1 天前
Vue CLI为何不显示webpack配置
前端·vue.js·webpack
富贵2号2 天前
从零开始理解 Webpack:构建现代前端工程的基石
webpack
Hashan4 天前
告别混乱开发!多页面前端工程化完整方案(Webpack 配置 + 热更新)
webpack
开心不就得了5 天前
构建工具webpack
前端·webpack·rust
鲸落落丶6 天前
webpack学习
前端·学习·webpack
闲蛋小超人笑嘻嘻6 天前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
guslegend6 天前
Webpack5 第五节
webpack
海涛高软8 天前
qt使用opencv的imread读取图像为空
qt·opencv·webpack
行者..................8 天前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js