Webpack AngularJS Sourcemaps 问题

Question

很长一段时间以来，我一直在努力让我的源地图在我的应用中工作。我已经设置了

devtool:  'source-map',

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

我使用我的 FE Stack 推送了一个非常简单的应用程序，希望有人能够识别问题，无论是 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

Answer 1

您可能需要分别为不同的加载器设置源映射。

对于'ng-annotate-loader' (Docs)

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

对于less，您可以使用documentation 选项，如@ahmedelgabri 建议

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

---

OP github 更改之前的旧帖子。

如果您想使用devtool: 'source-map'，其他选项是在您的output 中添加devtoolLineToLine: true。但是 devtoolLineToLine 已被弃用，因此请考虑将 devtool 更改为其他内容。 devtool: 'source-map' demo image

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

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

---

或者，您可以使用 devtool: 'eval' 或 eval 的某些变体，例如 cheap-module-eval-source-map（类似的行为，但没有文件名）also works fine for me

Answer 2

我可以通过添加 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了解更多详情

Answer 3

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

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

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

而且我可以很好地看到源代码

主要问题是 less-loader 您需要同时传递 less-loader 和 css-loader check the readme 的源映射选项

  {
    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

我希望这能回答你的问题