【技巧】如何 debug webpack 配置脚本
2019-03-14 本文已影响13人
周俊devin
看到 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
