Webpack AngularJS Sourcemaps问题

Question

Webpack AngularJS Sourcemaps问题

angularjswebpackwebpack-dev-serversource-maps

7

我一直在为我的应用程序中的源代码映射而苦苦挣扎。我已经设置了

devtool:  'source-map',

在webpack配置中，但它们在Chrome开发工具中仍然不可用。

我使用我的前端技术栈创建了一个非常简单的应用程序，希望有人能够确定问题所在，无论是与webpack、angular还是其他库有关。https://github.com/coreysnyder/Angular-Webpack3-Seed 以下是我正在运行的版本：

{ 
  CoreyApp: '1.0.0',
  npm: '4.4.4',
  ares: '1.10.1-DEV',
  http_parser: '2.7.0',
  icu: '57.1',
  modules: '48',
  node: '6.9.0',
  openssl: '1.0.2j',
  uv: '1.9.1',
  v8: '5.1.281.84',
  zlib: '1.2.8' 
}
OSX 10.12.6

- Corey

如果我将 start-native 端口更改为像 8080 这样的端口（因为它在我的电脑上无法启动），并运行 npm install 和 npm run start-native，一切都可以正常工作 https://i.stack.imgur.com/fkfXN.png，我可以在 Chrome 开发工具中看到源代码。 - varren

那么，如果你在view1.js控制器中插入一个调试器，你是否能在Chrome开发工具的view1.js中看到断点？我不是在控制台中找不到代码，而是它没有显示在控制器中。 - Corey

你可以尝试使用 devtool: 'cheap-module-source-map' 选项吗？ - cinnaroll45

我已经尝试了所有的选项。可惜没有一个能够将有用的源映射呈现在开发工具中。 - Corey

请列出您正在使用的操作系统？还有Node和npm版本。 - Tarun Lalwani

@TarunLalwani 我已经更新了我的问题，包括Node/NPM和OSX版本。 - Corey

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scipper · Answer 1

我可以通过添加babel-loader来修复JS文件的源映射。要做到这一点，您需要安装babel-loader：

npm i -D babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env

然后扩展您的规则以适用于 .js 文件

 rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'ng-annotate-loader',
             options: { add: true, single_quotes: true }
           },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
         ]
       }, [...]
 ]

关于babel-loader github repo的更多细节，请查看。

- varren · Answer 2

你可能需要为不同的加载器单独设置源映射。

对于'ng-annotate-loader'（文档）

use: [{
    loader: 'ng-annotate-loader',
    options: { 
        add: true, 
        single_quotes: true ,
        map: { inline: true, inFile: 'app.js', sourceRoot: __dirname + '/app' }}
}]

对于 less，您可以像 @ahmedelgabri 建议的那样使用 documentation 选项。

use: [{
    loader: "style-loader"
}, {
    loader: "css-loader", options: {
        sourceMap: true
    }
}, {
    loader: "less-loader", options: {
        sourceMap: true
    }
}]

OP github 变更之前的旧帖子。

另一个选项是在您的 output 中添加 devtoolLineToLine: true，如果您想使用 devtool: 'source-map'。但是 devtoolLineToLine 已被弃用，请考虑将 devtool 更改为其他内容。devtool: 'source-map' 演示图片

output: isTest ? {} : {
    devtoolLineToLine: true, // <= this line

    sourceMapFilename: '[name].map',
    path: __dirname + '/dist',
    filename: '[name].bundle.js',
    publicPath: publicPath
},

或者你可以使用devtool: 'eval'或一些变体，如cheap-module-eval-source-map（类似的行为，但没有文件名）对我也很有效。

- ahmedelgabri · Answer 3

这里的Webpack配置没有问题 https://github.com/coreysnyder/Angular-Webpack3-Seed

这是一个使用你的代码并在view1文件中设置断点的gif

这就是为什么文本是蓝色的原因

我可以正常地看到源代码

主要问题在于less-loader，您需要为less-loader和css-loader都传递source-maps选项请查看自述文件。

  {
    test: /\.less$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: 'less-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
  },

完成这个步骤后，您就可以像这样从样式面板进行调试了

如果您想直接编辑.less文件，自述文件中提到了一篇博客文章，可以帮助您解决这个问题https://github.com/webpack-contrib/less-loader#source-maps

希望这回答了您的问题。