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

相关推荐
Hashan2 小时前
你知道Webpack解决的问题是什么嘛?
前端·webpack
vipbic20 小时前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack
妮妮喔妮1 天前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J1 天前
webpack笔记
前端·笔记·webpack
webYin2 天前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
!执行2 天前
webpack 相关配置
webpack
醉方休2 天前
vite与webpack对比
前端·webpack·devops
wallflower20202 天前
🚀 从 Webpack 到 Vite:企业级前端构建、代码分割与懒加载优化完全指南
webpack·vite
一枚前端小能手2 天前
🚀 Webpack打包慢到怀疑人生?这6个配置让你的构建速度起飞
前端·javascript·webpack
全栈技术负责人2 天前
webpack性能优化指南
webpack·性能优化·devops