webpack 开发环境
2023-09-14 09:12:30 时间
当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。
$ webpack --progress --colors
如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。
$ webpack --progress --colors --watch
当然,使用 webpack-dev-server
开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
# 安装
$ npm install webpack-dev-server -g
# 运行
$ webpack-dev-server --progress --colors
相关文章
- 如何用 esbuild 替换 Create React App 中的 Webpack
- webpack系列---webpack介绍&基本使用
- webpack搭建基础vue项目
- webpack配置文件_webpackconfig.js详解
- Webpack多页面项目转Vite升级初尝试
- 一文彻底读懂webpack常用配置
- 前端工程化与webpack
- webpack 中的 hash 值有何用处?
- devtools怎么用_webpack devtool
- Day01_webpack
- 2. webpack构建的基石: tapable@1.1.3源码分析
- webpack
- webpack less-loader
- npm run dev 后 webpack-dev-server 做了哪些事情
- webpack性能优化(2):splitChunks用法详解
- webpack快速构建基于Koa2、MySQL和Webpack的Web应用(koa2mysql)