开发环境
我们在webpack的配置文件中将mode设置成development,具体的代码如下：
webpack.config.js
source map
当我们使用webpack打包源代码的时候，可能会很难最终到error和warning的位置，例如，我们现在有三个源文件打包到了一个bundle中，而其中有一个源文件错误了，那么报错的时候，会直接指向bundle.js 。我们想要准确的知道错误来自某一个源文件，这样的提示信息往往没有什么实际意义。
为了我们可以更加轻松的追踪错误和警告，JavaScript提供了source map功能，可以将编译后的代码映射到原始源代码。我们看一下下一个例子。首先对webpack的配置文件进行配置：
webpack.config.js
然后我们在print.js里面的代码在语法上有错误
print.js
然后我们进行打包，我们成功打包之后我们点击按钮，点击后在控制台会输出如下的错误：
控制台输出错误
方便我们进行简单的错误定位。
-
webpack watch mode(webpack 观察模式) -
webpack-dev-server（最可能被用到） webpack-dev-middleware
watch mode(观察模式)
如果其中一个文件被更新，代码将被重新编译，所以你不必再去手动运行整个构建。
但是这里需要我们手动的启动webpack watch mode的npm scripts我们看一下这里是如何进行配置的：
package.json
现在我们执行命令npm run watch 我们会进入到watch模式下，但是和build指令不同，这个执行没有退出，也就是我们还在一直处于被监控的状态，我们在修改文件，点击保存的时候，就会直接进行编译。
使用 webpack-dev-server
我们看一下我们应该怎么使用，首先我们需要先安装一下。
npm install --save-dev webpack-dev-server
在webpack的配置文件中进行配置：
webpack.config.js
上面怎么配置的意思是将dist目录下的文件serve到localhost:8000下，这个时候我们可以添加一个可以直接运行dev serve的script，在package.json中
现在，在命令行中运行 npm start，我们会看到浏览器自动加载页面。如果你更改任何源文件并保存它们，web server 将在编译代码后自动重新加载
使用 webpack-dev-middleware
webpack-dev-middleware 是一个封装器(wrapper)，它可以把webpack 处理过的文件发送到一个 server。 webpack-dev-server 在内部使用了它，然而它也可以作为一个单独的 package 来使用，以便根据需求进行更多自定义设置。下面是一个 webpack-dev-middleware 配合 express server 的示例。
首先我们需要先安装express和webpack-dev-middleware
因为我的网速比较慢，这里我是使用yarn 来进行安装的，安装的命令为：
yarn add express webpack-dev-middleware
接下来我们调整webpack的配置文件，确保middleware 功能是可以正常使用的
webpack.config.js
我们在脚本中使用了publicPath,用来确认资源文件可以正确的在http://localhost:3000，我们也可以指定port number，下面我们自定义express server：
先创建一个项目目录：
项目目录
server.js
然后我们添加一个npm script，让我们可以方便的运行服务：
package.json
我们执行npm run server 的时候，成功之后，我们访问http://localhost:3000就看到了我们写的界面。
网友评论