我是 webpack 的新手,我需要帮助设置生成源映射。我正在从命令行运行 webpack serve
,它编译成功。但我真的需要源图。这是我的 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 真的很陌生,虽然文档并没有真正帮助,因为我不确定这个问题具体是什么。
The 'debug' property was removed in webpack 2.
也许其他人曾经有过这个问题。如果您在 webpack 2
中使用 UglifyJsPlugin
,则需要明确指定 sourceMap
标志。例如:
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
devtool: 'source-map'
才能正常工作
带有源映射的 jsx 的最小 webpack 配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: `./src/index.jsx` ,
output: {
path: path.resolve(__dirname,"build"),
filename: "bundle.js"
},
devtool: 'eval-source-map',
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
运行它:
Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
Asset Size Chunks Chunk Names
bundle.js 1.5 MB 0 [emitted] main
bundle.js.map 1.72 MB 0 [emitted] main
+ 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$
如果针对开发 + 生产进行优化,您可以在配置中尝试这样的操作:
const dev = process.env.NODE_ENV !== 'production'
// in webpack.shared.config
{
devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
}
devtool:“eval-cheap-module-source-map”提供了仅映射行(无列映射)并且速度更快的 SourceMap
devtool:“source-map”无法缓存模块的 SourceMap,需要为块重新生成完整的 SourceMap。这是用于生产的东西。
另一种选择是返回 false 用于生产,假设您不需要用于生产构建的源映射。
我正在使用 webpack 2.1.0-beta.19
dev
变量在哪里/如何设置?
.env
文件或更改为 process.env
。这只是一个示例,但可能如下所示:const dev = process.env.development === true
在 Webpack 2 上,我尝试了所有 12 个 devtool 选项。以下选项链接到控制台中的原始文件并保留行号。请参阅下面的注释:仅行。
https://webpack.js.org/configuration/devtool
devtool 最佳开发选项
build rebuild quality look
eval-source-map slow pretty fast original source worst
inline-source-map slow slow original source medium
cheap-module-eval-source-map medium fast original source (lines only) worst
inline-cheap-module-source-map medium pretty slow original source (lines only) best
仅行
源映射被简化为每行一个映射。这通常意味着每个语句有一个映射(假设您的作者是这种方式)。这可以防止您在语句级别调试执行以及在行的列上设置断点。与最小化结合是不可能的,因为最小化器通常只发出一条线。
重新审视这个
在一个大型项目中,我发现 ... eval-source-map 重建时间约为 3.5 秒 ... inline-source-map 重建时间约为 7 秒
即使我面临同样的问题,在浏览器中它也显示已编译的代码。我在 webpack 配置文件中进行了以下更改,现在工作正常。
devtool: '#inline-source-map',
debug: true,
在装载机中,我将 babel-loader 作为首选
loaders: [
{
loader: "babel-loader",
include: [path.resolve(__dirname, "src")]
},
{ test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
{ test: /\.html$/, loader: 'raw' },
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{test: /\.less$/, loader: "style!css!less"},
{ test: /\.styl$/, loader: 'style!css!stylus' },
{ test: /\.css$/, loader: 'style!css' }
]
debug
属性已在 webpack 2 中删除。
include
选项为我解决了这个问题。在 webpack 2 中,它看起来像这样:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
不定期副业成功案例分享
denug
属性已在 webpack 2 中删除。devtool
就足够了。不需要任何调试值。*.map
,因此如果您的文件是main.js
,则源映射称为main.js.map
。然而,在使用 webpack-dev-server 进行开发期间,不会在文件系统上创建 sourcemap 文件,而是在内存中神奇地创建并使用热模块重载技术发送到浏览器。< /b> 我希望这会有所帮助。 :-)