3 其他

1. 编译输出进度带颜色

webpack --progress --colors


2. 启动监听模式

开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。

webpack --progress --colors --watch


3. 使用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


4. 打印错误详情

webpack --display-error-details


5. resolve和resolveLoader 应用

Webpack 的配置提供了resolve和resolveLoader参数来设置模块解析的处理细节,resolve用来配置应用层的模块(要被打包的模块)解析,resolveLoader用来配置loader模块的解析。

当引入通过 npm 安装的 node.js 模块时,可能出现找不到依赖的错误。Node.js 模块的依赖解析算法很简单,是通过查看模块的每一层父目录中的node_modules文件夹来查询依赖的。当出现 Node.js 模块依赖查找失败的时候,可以尝试设置resolve.fallback和resolveLoader.fallback来解决问题。


Webpack 中涉及路径配置最好使用绝对路径,建议通过path.resolve(__dirname, "app/folder")或path.join(__dirname, "app", "folder")的方式来配置,以兼容 Windows 环境。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,938评论 31 98
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,729评论 7 110
  • 今天是中国农历新年正月初七,南方的天气温和,阳光正好。一年到头,各种亲戚朋友都会来串串门,吃个饭聊聊天。微信扣扣上...
    我是牛阳阳阅读 1,349评论 2 4
  • 任何值得去的地方都没有捷径。---贝弗利·希尔斯 上周末再次爬华山。当我在朋友圈发了登华山的照片后,有一个朋友问我...
    简婕啊阅读 1,986评论 0 0
  • 上午花亭湖。 门票30每人,每艇200,限七人。进去才得知本地人凭身份证可以免除门票。也许是怪我不合适宜的一句普通...
    黄云丰阅读 223评论 0 0