angularjs - Webpack AngularJS Sourcemaps 问题

Question

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

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