所以我的应用程序正在运行连接的admin.bundle.js
文件。我正在使用webpack管理模块,然后使用 gulp-webpack 导入我的webpack配置,然后运行源代码代码:
gulp.task('webpack', function() {
return gulp.src('entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('app/assets/js'));
});
我的Webpack配置
var webpack = require('webpack');
module.exports = {
entry: "./entry.js",
output: {
pathinfo: true,
path: __dirname,
filename: "admin.bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
问题是当我使用ChromeDev工具测试我的应用时,各个应用模块中的断点将无效。它们仅在我查看admin.bundle.js
的源时才起作用这是不理想的,因为我需要在代码中搜索特定行来转到:(而不是仅仅在模块本身内部发生断点,这使调试更容易,更快。
调试器下面是在连接的admin.bundle.js文件内的函数上停止的
有tagsDirective.js模块,这是我期望断点发生的地方:(
有人在使用Webpack和Gulp之前遇到过这个问题吗?
答案 0 :(得分:0)
啊想通了,我将源代码生成代码移回了webpack,并从Gulp中移出:
var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
devtoolLineToLine: true,
sourceMapFilename: "admin.bundle.js.map",
pathinfo: true,
path: __dirname,
filename: PROD ? "admin.bundle.min.js" : "admin.bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({minimize: true})
] : []
};
gulp.task('webpack', function() {
return gulp.src('entry.js')
.pipe(webpack( require('./webpack.config.js') ))
// .pipe(sourcemaps.init())
// .pipe(sourcemaps.write('./'))
.pipe(gulp.dest('app/assets/js'));
});