&npsp;&npsp;&npsp;&npsp;主目录已经给出了webpack的配置的所有章节。但是我么在学习过程中发现一个问题，在生产环境中，我们js中有函数出现错误的时候，在浏览器很难定位。
例如我们写了这么一段js，显然tes函数是没有定义的。
let test = () => {
console.log('test')
}
// 执行
tes()
复制代码运行npm run dev看下报错！
一、devtool 属性配置
- 1.source-map
我们在webpack.config.custom.js文件加入如下代码
devtool: 'source-map',// 增加映射文件可以帮我们调试源代码
复制代码先运行npm run build看下输出文件，多了一个映射文件
npm run dev，浏览器点击index.js看看效果,准确的给出了错误位置。
- 2.eval-source-map 同样我们修改下
devtool: 'eval-source-map',//不会产生映射文件，但是可以显示错误位置，打包在index.js中了
复制代码运行npm run build看下输出文件
- 3.cheap-module-source-map
会产生单独的文件，不会产生列 - 4.cheap-module-eval-source-map
不会产生文件，集成在文件中，不会产生列
二、watch 属性配置
为什么要说下watch 属性配置，每次我们在修改配置都需要执行npm run build才能看到新输出！使用watch 属性后，webpack就一直监控刷新。
watch: true,
watchOptions: {
poll: 1000,//1秒跟新一次
aggregateTimeout: 500,//防抖，例如在输入框输入的时候不包，只有停止的时候才会打包
ignored: /node_modules/ // 忽略监控文件
},
复制代码这里就不好截图说明了，大家有兴趣可以在index.js中修改，查看控制台的编译打包时间。
三、resolve 属性配置
上面两个属性主要方便开发调试，这个不太一样，主要是用于三方包的解析，也是比较常用的属性。
这里我们用一个bootstrap 框架试验下！npm i bootstrap -D
在index.js 中 import 'bootstrap执行npm run build,报错
Module not found: Error: Can't resolve 'popper.js' in '/Users/gedongliang/Desktop/git/webpack/node_modules/bootstrap/dist/js'
复制代码可以看出默认引用bootstrap/dist/js文件，当然我们也可以写成import 'bootstrap/dist/css/bootstrap.css'，编译没什么问题了，但是非常的不友好！我们看bootstrap中package.json中style
resolve属性
resolve: {
modules: [path.resolve('node_modules')],//只从node_modules下查找，其它模块可以在数组中这样写[a,b,c]
mainFields: ['style','main'] //告诉webpack 先找style下路径，在找main 下的路径
},
复制代码接下来我们在index.html 写入bootstrap的一些组件，直接去v4.bootcss.com/docs/compon…这里找几个放入body中就好了。
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div>
<button class="btn-danger btn">我是bootstrap 按钮</button>
</div>
复制代码咱们直接npm run dev，浏览器看下效果，完美！
源码下载
创建文件夹,cd至已创建文件夹，执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_source_map。
进入webpack工程目录，执行 npm install -D
