Webpack AngularJS 源地图问题

Question

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

devtool:  'source-map',

在 webpack 配置中，但它们在 Chrome devtools 中仍然不可用。

我使用我的 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

我可以通过添加 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 2

您可能需要为不同的加载程序单独设置源映射。

对于'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 option like 建议

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

OP github 更改之前的旧 post。

其他选项是添加devtoolLineToLine: true in your output, if you want to use devtool: 'source-map'. But devtoolLineToLine is deprecated, so consider changing devtool to something else. 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 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 文件，自述文件中提到了一个博客 post 可以帮助解决这个问题 https://github.com/webpack-contrib/less-loader#source-maps

我希望这能回答你的问题

Webpack AngularJS 源地图问题

Webpack AngularJS Sourcemaps issue

angularjs

webpack

webpack-dev-server

source-maps