【技巧】如何 debug webpack 配置脚本

看到 webpack.config.js 文件后,想盘它

我们编辑脚本后,脚本有没有编写正确,通过 debug 来查看是比较高效的。

通过对 webpack 的了解, 具体的 webpack 配置信息会通过对应的webpack.config.js来进行配置

var entry = {};

function walk(dir) {
  debugger
  dir = dir || '.';
  var directory = path.join(__dirname, '../examples', dir);
  var entryDirectory = path.join(webSrcDirectory, dir);
  fs.readdirSync(directory)
    .forEach(function(file) {
        ...
    });
}

module.exports = {
  entry: entry,
  output: {
    path: '.',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        exclude: /node_modules/
      }
    ]
  }
  plugins: [bannerPlugin],
  watch:true
}

怎么盘?

配置

修改之前的 package.json 脚本

    "scripts": {
        "build:examples:web": "webpack --config build/webpack.examples.web.config.js",
    }

添加 DEBUG 语句的 package.json 脚本

    "scripts": {
        "build:examples:web": "node $NODE_DEBUG_OPTION ./node_modules/webpack/bin/webpack.js  --config build/webpack.examples.web.config.js"
    }

运行+调试

点击package.json 左边的三角符号, 然后以 Debug 的方式进行运行

image

运行后,通过 debugger打断点 的方式进行语句断点

image

引用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,324评论 4 31
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,715评论 7 110
  • 2017年12月7日更新,添加了clean-webpack-plugin,babel-env-preset,添加本...
    ZombieBrandg阅读 1,169评论 0 19
  • 音频文件→http://m.ximalaya.com/share/sound/90030358小满(意)_致自己!...
    风声栋作阅读 1,152评论 24 38
  • 漫不经心拍的照片被风吹成了纪念温度色彩气味都还停在那个时间那是回不去的地方那是你我曾经漫不经心走过的从前如今剩下的...
    猜丁壳你个头啊阅读 179评论 0 0