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

【问题标题】：which webpack devtool is suitable for chrome apps?哪个 webpack devtool 适合 chrome 应用程序？
【发布时间】：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()
  ]
}

非常感谢！

【问题讨论】：

标签： javascript google-chrome webpack google-chrome-app source-maps

【解决方案1】：

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

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

原因是 chrome 应用不能：

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

【讨论】：