哪个 webpack devtool 适合 chrome 应用程序？

Posted 2023-02-22

【中文标题】哪个 webpack devtool 适合 chrome 应用程序？

【英文标题】：which webpack devtool is suitable for chrome apps?

【发布时间】：2016-08-04 22:31:38

【问题描述】：

我已将我的 chrome-app 构建过程从 grunt 迁移到 webpack。 起初我使用source-map 作为 webpack 开发工具。

一切似乎都按预期工作，但是当我压缩我的构建时，调试出现错误 - 无法检查变量，实际执行的代码与 chrome 突出显示的行不完全对齐...

所以我尝试了cheap-module-eval-source-map，它在网络浏览器（chrome）中完美工作，但在 chrome 应用程序中抛出错误Uncaught EvalError: Refused to evaluate a string as javascript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:".

那么，在压缩我的构建并将其作为 chromeapp 运行时，我应该使用哪个开发工具？

我的 webpack 缩短配置：

  // also tried:
  // cheap-module-source-map - doesn't work at all
  // cheap-module-eval-source-map - throws an error on chrome-apps
  // source-map - buggy when using with uglify plugin
  // inline-source-map - same as source-map
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.UglifyJsPlugin(
      compress: 
        warnings: false
      
    ),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.DedupePlugin()
  ]

非常感谢！

【参考方案1】：

由于严格的Chrome apps "Content Security Policy"，适当的webpack devtool可能是其中之一：

inline-cheap-source-map - 转换后的代码（仅行） inline-cheap-module-source-map - 原始来源（仅行） inline-source-map - 原始来源

原因是 chrome 应用不能：

从字符串评估js 将地图加载为单独的文件，因此您需要内联地图