Question

我一直在努力让我的源地图在我的应用中运行很长一段时间。我已经设置了

devtool:  'source-map',

在网络包配置中，但它们在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建议的@ahmedelgabri选项

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

OP github更改前的旧帖子。

如果您想使用devtool: 'source-map'，其他选项是在devtoolLineToLine: true中添加output。但是不推荐使用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 3

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

这是一个使用你的代码＆amp;在view1文件

中设置断点

这就是文字为蓝色的原因

我可以看到来源很好

主要问题是less-loader您需要传递两者的源地图选项，less-loader＆amp; 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

我希望这能回答你的问题

Webpack AngularJS Sourcemaps问题

3 个答案: