SourceMapDevToolPlugin SourceMapDevToolPlugin 本插件实现了对 source map 生成,进行更细粒度的控制。它可以替代 devtool 选项。 代码语言:javascript 复制 new webpack.SourceMapDevToolPlugin(options) 选项 支持以下选项: test(string|regex|array):包含基于扩展名的模块的 source map(默认是 .js 和.css)。 inclu...
SourceMapDevToolPlugin({ filename: '[file].map', exclude: ['vendor.js'], }), ]; config.optimization = { minimize: true, minimizer: [ new TerserPlugin({ parallel: false, sourceMap: false, }), new CssMinimizerPlugin(), ], moduleIds: 'deterministic', splitChunks: { chunks: 'all', ma...
可以使用SourceMapDevToolPlugin插件进行更细粒度的配置。通过source-map-loader来处理已有的 source map。 ⚠️注意:devtool的默认值为false,如果传入的不是webpack的可选参数或者false会导致webpack运行报错 source-map:在生产环境使用,但是必须需要使用SourceMapDevToolPlugin插件进行设置,并且不能使用d...
HtmlWebpackPlugin: 创建html,自动引用生成的文件,这对于生成的bundle包每次都变化时(比如含有hash)特别有用。 webpack-bundle-analyzer:包大小分析工具 clean-webpack-plugin:清空output的目录,每次生成都是新的文件 SourceMapDevToolPlugin: 生成source map,可以使用devtool来代替,但是这个plugin配置的更加细致,devtool...
webpack 就利用了 eval 这个特性来优化的 sourcemap 生成的性能,比如你可以指定 devtool 为 eval: 生成的代码就是每个模块都被 eval 包裹的,并且有 sourceUrl 来指定文件名: 这样有啥好处呢? 快呀,因为只要指定个文件名就行,不用生成 sourcemap。sourcemap 的生成还是很慢的,要一个个 mapping 的处理,做编码之...
可以直接使用SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin来替代使用devtool选项,它有更多的选项,但是切勿同时使用devtool选项和SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin插件。因为devtool选项在内部添加过这些插件,所以会应用两次插件。 这么多模式用哪个好?
选择一种源映射样式,以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的选择。不要同时使用devtool选项和插件。devtool选项在内部添加了插件,所以你最终会得到应用两次的插件。
SourceMapDevToolPlugin 中的 columns 设为 true 时就是行映射 SourceMap。但这个插件处理的逻辑已经是在最后产物生成阶段,而在整个 Webpack 构建流程中流转的 SourceMap 依然是行列映射。因此可以直接代理掉 SourceMapSource 的 map 方法,写死 columns 为 true。
上面eval-cheap-source-map 调试时发现是 babel-loader 转译过后的代码,如果需要调试最初的源码就需要加上 module,它会将每次的 sourcemap 关联起来,最终能够映射回最初的源码。 我们现在把 devtool 更改为 eval-cheap-module-source-map 并对比上面配置为 eval-cheap-source-map 来看看效果。
webpack 就利用了 eval 这个特性来优化的 sourcemap 生成的性能,比如你可以指定 devtool 为 eval: 生成的代码就是每个模块都被 eval 包裹的,并且有 sourceUrl 来指定文件名: 这样有啥好处呢? 快呀,因为只要指定个文件名就行,不用生成 sourcemap。sourcemap 的生成还是很慢的,要一个个 mapping 的处理,做编码之...