哪个webpack开发工具适合chrome应用程序

which webpack devtool is suitable for chrome apps?

本文关键字:chrome 应用程序 webpack 开发工具 哪个      更新时间:2024-06-29

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

一切似乎都如预期的那样工作,但当我压缩构建时,调试出现了问题——无法检查变量,实际执行的代码与chrome突出显示的行不完全一致。。。

因此,我尝试了cheap-module-eval-source-map,它在web浏览器(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:".

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

我的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()
  ]
}

非常感谢!

由于严格的Chrome应用程序"内容安全政策",适当的webpack开发工具可能是其中之一:

  • inline-cheap-source-map-转换代码(仅限行)
  • inline-cheap-module-source-map-原始源(仅限行)
  • inline-source-map-原始来源

原因是chrome应用程序不能:

  • 从字符串计算js
  • 将映射加载为单独的文件,因此需要内联映射