【问题标题】:Why does webpack say it has generated a source map when it hasn't?为什么 webpack 说它已经生成了 source map 而它没有?
【发布时间】:2016-09-08 14:25:53
【问题描述】:

在下面的屏幕截图中,您可以看到我们的网站加载了两个主要的 .js 文件 - app 和 lib。我们的 .js 文件由 webpack 构建并输出用于生产,它们的底部没有//# sourceMappingURL=/path/to/script.js。也没有像X-SourceMap: /path/to/script.js.map 这样的标头被返回。

那么,为什么 Chrome 会在尝试获取源地图时抛出控制台错误?

什么是 index.js? 我们的网站上甚至没有那个文件。

我们的站点是 Docker 容器中的 http-server 节点模块的服务器,由 nginx 提供服务。


更新

Derek 在下面的回答表明,webpack 实际上已经在我们的输出文件中添加了 #sourcemap 注释,尽管它没有生成 sourcemap,也没有被要求生成。

那么为什么 webpack 会在我们编译的 app.js 文件中引用一个不存在的源映射呢?

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; // e.g.  ~/projects/ekaya
var srcPath = path.join(rootPath, 'src');
var distPath = path.join(rootPath, '../dist/client_gumtree/app');
var shared

Path = path.resolve('../shared');

module.exports =
{
  bail: true,
  cache: false,
  context: rootPath,
  debug: false,
  //devtool: 'source-map', //inline-source-map, https://webpack.github.io/docs/configuration.html#devtool
  target: 'web', //node, web
  // devServer:
  // {
  //   contentBase: distPath,
  //   historyApiFallback: true,
  //   outputPath: path.join(distPath, 'devServer'),
  //   hot : true,
  // },
  entry:
  {
    app: ['babel-polyfill', path.join(srcPath, 'core/index.ts')],
    lib: ['babel-polyfill', 'react', 'react-router', 'react-dom', 'lodash', 'history',
          'react-redux', 'redux-thunk', 'redux-api-middleware', 'redux']
  },
  output:
  {
    path: distPath,
    publicPath: '',
    filename: '/[name].js',
    pathInfo: true
  },
  resolve:
  {
    root: srcPath,
    extensions: ['', '.js',  '.jsx', '.ts', '.tsx'],
    modulesDirectories: ['node_modules', srcPath, 'typings']
  },
  module:
  {
    loaders:
    [
      {test: /\.js$/, loader: 'babel-loader?cacheDirectory', include: [srcPath, sharedPath]},
      {test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', include: [srcPath, sharedPath]},
      {test: /\.ts$/, loader: 'babel-loader!ts-loader?cacheDirectory', include: [srcPath, sharedPath]},
      {test: /\.tsx$/, loader: 'babel-loader!ts-loader?cacheDirectory', include: [srcPath, sharedPath]},
      {test: /\.json$/, loader: 'json-loader'},
      {test: /\.scss$/, loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[name]-[local]---[hash:base64:5]',
        'cssnext',
        'resolve-url',
        'sass?sourceMap'
      ]},
      {test: /\.png$/, loader: 'file-loader'},
      {test: /\.jpg$/, loader: 'file-loader'},
      {test: /\.jpeg$/, loader: 'file-loader'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml&name=/[name].[ext]'},
      {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff&name=/[name].[ext]"},
      {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff&name=/[name].[ext]"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream&name=/[name].[ext]"},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?name=/[name].[ext]"}
    ]
  },
  plugins:
  [
    new webpack.DefinePlugin({}) //these are our config settings & are injected in the build script when calling webpack using --define
    ,new CopyWebpackPlugin([ { from: path.join(srcPath, 'images'), to: 'images' } ]) //copy images to the build folder unchanged
    ,new HtmlWebpackPlugin({ inject: true, template: path.join(srcPath, 'index.html')  }) // this puts our script file into the main html page
    ,new webpack.NoErrorsPlugin() // don't emit bundles with errors
    ,new webpack.optimize.CommonsChunkPlugin('lib', '/lib.js')  // share common files
    ,new webpack.optimize.DedupePlugin() // share common files
    ,new webpack.optimize.AggressiveMergingPlugin()
  //  ,new webpack.optimize.UglifyJsPlugin({ sourceMap: false, mangle: false, minimize: true, beautify: false, comments: false,}) //Can't get this to work without error, so instead we uglify manually in the build script after webpack has run
  ]
};

【问题讨论】:

  • 我认为这些源图来自我的 node_modules 文件夹。因此,作为删除它们的技巧,我在 webpack 完成后在最终输出上运行它: sed -i -e "s/# sourceMappingURL=//g" ./app.js

标签: javascript node.js webpack httpserver source-maps


【解决方案1】:

它正在加载,因为您的文件包含 sourceMappingURL:

【讨论】:

  • 谢谢德里克!我附上了我们的 webpack 文件。我们没有提到源地图。为什么它会尝试添加一个?
  • @Richard 我不知道。根据文档,如果您没有将 devtool 设置为 source-map,则不应包含源映射。
猜你喜欢
  • 2020-08-25
  • 1970-01-01
  • 2021-06-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-05-10
  • 1970-01-01
相关资源
最近更新 更多