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 天前
webpack打包优化
webpack·掘金·金石计划·前端工程化
百思可瑞教育4 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
歪歪1004 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪1004 天前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
谢尔登4 天前
【Webpack】模块联邦
前端·webpack·node.js
Yvonne爱编码6 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
会有钱的-_-6 天前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
xiaopengbc7 天前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
ningmengjing_8 天前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner20008 天前
Webpack开发:从入门到精通
前端·webpack·node.js