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

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

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

目录如下：

一、在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，查看控制台会发现：

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

二、使用开发工具 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...