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 环境。