我是webpack的新手,我需要一个帮手来设置生成源Map。我正在从命令行运行webpack serve
,它编译成功了。但是我真的需要源Map。这是我的webpack.config.js
。
var webpack = require('webpack');
module.exports = {
output: {
filename: 'main.js',
publicPath: '/assets/'
},
cache: true,
debug: true,
devtool: true,
entry: [
'webpack/hot/only-dev-server',
'./src/components/main.js'
],
stats: {
colors: true,
reasons: true
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'styles': __dirname + '/src/styles',
'mixins': __dirname + '/src/mixins',
'components': __dirname + '/src/components/',
'stores': __dirname + '/src/stores/',
'actions': __dirname + '/src/actions/'
}
},
module: {
preLoaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'jsxhint'
}],
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'react-hot!babel-loader'
}, {
test: /\.sass/,
loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
}, {
test: /\.scss/,
loader: 'style-loader!css!sass'
}, {
test: /\.(png|jpg|woff|woff2)$/,
loader: 'url-loader?limit=8192'
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
我真的是新的webpack,并期待虽然文档并没有真正帮助,因为我不知道这个问题是具体的。
6条答案
按热度按时间l7mqbcuq1#
要使用源Map,应将
devtool
选项 value 从true
更改为this list
中可用的 value,例如source-map
devtool
:'source-map'
-发出源Map。x4shl7ld2#
也许其他人在某个时候也遇到了这个问题。如果你在
webpack 2
中使用UglifyJsPlugin
,你需要显式地指定sourceMap
标志。例如:e4yzc0pl3#
具有源Map的jsx的最小webpack配置:
运行它:
bejyjqdl4#
如果针对开发+生产进行优化,您可以在您的配置中尝试以下内容:
来自文档:
另一个选择是在假定您不需要用于生产构建的源Map的情况下,为生产返回false。
我正在使用网络包2.1.0-beta.19
1mrurvl15#
在Webpack 2上,我尝试了所有12个devtool选项。以下选项链接到控制台中的原始文件并保留行号。请参见下面的注解:行。
https://webpack.js.org/configuration/devtool
devtool最佳开发选项
仅限行
源Map被简化为每行一个Map。这通常意味着每个语句一个Map(假设您的作者是这样写的)。这会阻止您在语句级别调试执行以及在一行的列上设置断点。不能与最小化组合使用,因为最小化通常只发出一行。
重新审视
在一个大型项目中,我发现... eval-source-map重建时间约为3.5秒... inline-source-map重建时间约为7秒
8tntrjer6#
即使是我遇到的同样的问题,在浏览器中它显示的是编译代码。我已经在webpack配置文件中做了下面的更改,它现在工作得很好。
在装载机中,我将巴伯装载机作为首选