3 其他

2017-04-01 本文已影响0人 winzhyming

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