2.2 webpack 之 devtool 、 watch、resolve属性配置

·  阅读 383

&npsp;&npsp;&npsp;&npsp;主目录已经给出了webpack的配置的所有章节。但是我么在学习过程中发现一个问题,在生产环境中,我们js中有函数出现错误的时候,在浏览器很难定位。
例如我们写了这么一段js,显然tes函数是没有定义的。

let test = () => {
    console.log('test')
}
// 执行
tes()
复制代码

运行npm run dev看下报错!

接着我们点击index.js看下具体原因的时候,这个很不友好!

那么怎么解决这个问题呢?这里可以配置devtool属性

一、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看下输出文件

同样我们在浏览器,点击index.js也能定位错误位置。

  • 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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改