最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【基本解决】webpack中如何设置devtool的sourcemap

Webpack crifan 2894浏览 0评论

折腾:

【已解决】把react-hot-boilerplate改为用最新webpack-dev-server去调试代码

期间,需要设置devtool,看到很多人有各种写法。不知道用哪个。

webpack devtools

configuration

Devtool

开发辅助调试工具(Devtool)

webpack sourcemap 选项多种模式的一些解释 – 目田 – SegmentFault

“cheap-module-eval-source-map 绝大多数情况下都会是最好的选择,这也是下版本 webpack 的默认选项。”

另外,看到:

eval

的编译和重新编译的速度都不错,感觉最适合development

【总结】

所以目前设置为:

var isProd = (process.env.NODE_ENV === ‘production’);
  // https://webpack.js.org/configuration/devtool/
  // https://doc.webpack-china.org/configuration/devtool/
  devtool: isProd ? ‘cheap-module-source-map’ : ‘eval’,
  // devtool: ‘cheap-module-source-map’,

package.json

  “scripts”: {
    “dev”: “cross-env NODE_ENV=development webpack-dev-server –progress –colors –inline –hot –open”,
    “lint”: “eslint src”,
    “build”: “cross-env NODE_ENV=production && rm -rf ./build && cp ./index.html ./build && webpack -p –progress –colors”
  },

转载请注明:在路上 » 【基本解决】webpack中如何设置devtool的sourcemap

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.175 seconds, using 22.15MB memory