【技巧】如何 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

引用

• how to breakpoint to webpack in intellij IDEA?
• weex vue web 打包脚本解析