webpack笔记三：使用 source map 以及开发环境的配置

首先配置好简单的开发环境：

npm init -y
cnpm install webpack webpack-cli -D

目录以下：

1、在webpack中使用source map

在实际开发过程当中，咱们在使用webpack打包的时候，打包完成的bundle.js报错信息是很难Debug的，这时候就须要Source Map来还原真实的出错位置。例如，若是将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中a.js包含一个错误，那么堆栈跟踪就会指向到 a.js。那么咱们在webpack.config.js 配置

而后咱们在src目录下增长a.js, b.js 和 c.js 文件，而后在c.js里这样写：

console.error('出错了！');

接着运行npm run build打开index.html，查看控制台会发现：

会明确地看到出错的位置。

2、使用开发工具 webpack-dev-server

webpack-dev-server为你提供了一个简单的 web 服务器，而且可以实时从新加载(live reloading)。首先让咱们执行 cnpm install webpack-dev-server -D 命令，而后修改webpack.config.js文件：

devServer:{
    publicPath: '/dist/',
    contentBase: './',
    host: '127.0.0.1',
    port: 8080,
    quiet: true,
    open: true
}

咱们能够对devServer进行相关配置配置详见官方文档，下面介绍一些简单的配置：

• devServer.publicPath

此路径下的打包文件可在浏览器中访问。假设服务器运行在 http://localhost:8080 而且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，因此你的包(bundle)能够经过 http://localhost:8080/bundle.js 访问。

• devServer.contentBase

告诉服务器从哪里提供内容。只有在你想要提供静态文件时才须要。devServer.publicPath 将用于肯定应该从哪里提供 bundle，而且此选项优先。

• devServer.host

指定使用一个 host。默认是 localhost。若是你但愿服务器外部可访问，能够指定host: "0.0.0.0"

• devServer.port

指定要监听请求的端口号。

• devServer.quiet

启用 quiet 后，除了初始启动信息以外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。

• devServer.open

在执行命令时打开浏览器，也能够指定特定的浏览器。

• devServer.headers

在全部响应中添加头部内容：

headers: {
  "X-Custom-Foo": "bar"
}

---

另附上github项目练习地址：https://github.com/zgf123/web...