webpack学习笔记-开发(提升开发效率)

本指南中的工具仅用于开发环境，请不要在生产环境中使用它们！

 

使用 source map:追踪到错误和警告在源代码中的原始位置

source map 有不少不一样的选项可用，请务必仔细阅读它们,对于本指南，咱们使用 inline-source-map 选项

webpack.js添加配置项:devtool: 'inline-source-map',

 

加上这一行,代码就会提示源代码哪里出错，不然就是很难读的那种!

 

选择一个开发工具

1:webpack's Watch Mode:npm run watch

惟一的缺点是，为了看到修改后的实际效果，你须要刷新浏览器。

若是可以自动刷新浏览器就更好了，能够尝试使用 webpack-dev-server，刚好能够实现咱们想要的功能

 

2:webpack-dev-server:简单web服务器,实时加载

npm install --save-dev webpack-dev-server

安装完毕:须要告诉webpack在哪里找文件

 

 添加启动脚本,启动开发服务器:

能够配置端口和是否压缩"start": "webpack-dev-server --open",

devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000 }

 

3:webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)，它能够把 webpack 处理后的文件传递给一个服务器(server)。 

webpack-dev-server 在内部使用了它，

同时，它也能够做为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。

接下来是一个 webpack-dev-middleware 配合 express server 的示例。

首先，安装 express 和 webpack-dev-middleware：

npm install --save-dev express webpack-dev-middleware

 

 

下一章节:模块热更换!