源地图不适用于 Webpack

Posted 2023-03-07

【中文标题】源地图不适用于 Webpack

【英文标题】：Source Maps not working with Webpack

【发布时间】：2016-10-22 01:00:49

【问题描述】：

我是 webpack 的新手，在配置它以生成必要的源映射时遇到了一些麻烦。在 devtools 中它说

检测到源地图

但它显示的是捆绑包而不是原始代码：

这是我的 webpack.config.js：

module.exports = 
  entry: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/dev-server',
    "./src/index.js"
  ],
  output: 
    filename: 'bundle.js',
    path: '/',
  ,
  debug: true,
  devtool: 'source-map',
  resolve: 
    extensions: ['', '.jsx', '.scss', '.js', '.json']
  ,
  module: 
    loaders: [
      
        test: /(\.js|\.jsx)$/,
        exclude: /node_modules/,
        loaders: ['react-hot','babel']
      ,
      
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      
    ]
  ,
  devServer:  hot: true ,
  plugins: [ new webpack.HotModuleReplacementPlugin() ],
  inline: true,
  progress: true,
  colors: true
;

这是我的 package.json：

  "name": "react-template",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": 
    "dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js",
    "test:bundle": "./node_modules/.bin/tape test/bundle.js",
    "dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js"
  ,
  "devDependencies": 
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "node-sass": "^3.8.0",
    "on-build-webpack": "^0.1.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.2.1",
    "style-loader": "^0.13.0",
    "tape": "^4.4.0",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.14.1"
  

我尝试了devtool 选项的多种变体并阅读了this、this 和this，但没有运气。

任何帮助都会很棒！

【问题讨论】：

我什至不能说检测到源地图

【参考方案1】：

在bundle.js 中，您将看到原始转译的 webpack 包 - 这是正常行为。

打开webpack://，您将看到您的项目文件。

【讨论】：

对，但是如果 Chrome 已经显示源地图，为什么它会一直纠缠你说检测到源地图？

Chrome 目前存在问题，如果这个答案不能解决问题，请看这里：github.com/webpack/webpack/issues/3165

@Everettss 感谢您的回答。如果我在控制台中看到显示 uglified 跟踪的错误，我如何才能找到原始变量/函数名称？例如，我看到(index):27 Uncaught Error: [$injector:modulerr] Failed to instantiate module bolt due to: Error: [$injector:unpr] Unknown provider: e 我的应用程序正在编译和工作而没有缩小，但是由于上述错误，当我在生产模式下运行 webpack 时失败。任何帮助表示赞赏。谢谢

【参考方案2】：

在您的 webpack.config.js 文件中添加以下内容：

devtool: "#inline-source-map",

你可以从 webpack 网站上找到明确的信息：https://webpack.js.org/configuration/devtool/

另外，请从 webpack 网站找到 sourcemap 部分的附加屏幕截图。

【参考方案3】：

确保您的 npm 构建脚本中有 --mode development，

 "name": "test",
 "version": "1.0.1",
 "description": "",
 "scripts": 
 "build": "webpack",
  "start": "webpack-dev-server --mode development --open"
   "test": "echo \"Error: no test specified\" && exit 1",
 ,
  "author": "",
  "license": "",
  "devDependencies": 
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "webpack": "^4.19.1",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.8"
  ,
  "dependencies": 
 

webpack.config.js

const path = require('path');
var webpack = require('webpack');

module.exports = 
    entry: './src/web.js',
    devtool: 'inline-source-map',
    output: 
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    ,
    mode: 'development',
    module: 
        rules: [
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: 
                loader: "babel-loader",
                options: 
                    presets: ["babel-preset-env"]
                
            
        ]
    ,
    devServer: 
        inline: true,
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        watchOptions: 
            index: 'index.html',
            open: true,
            poll: true,
            watchContentBase: true
        
    ,
    watch: true,
    watchOptions: 
        aggregateTimeout: 500,
        ignored: /node_modules/,
        poll: 3000
    

【参考方案4】：

我面临的问题是我的nginx 配置。我的 nginx 配置为源映射文件抛出 404，因为它无法识别要查找的 .map 文件。因此，除了.js|.css 之外，还添加了.map 并已修复。

location ~* \.(?:css|js|map)$ 
  expires 1y;
  access_log off;
  add_header Cache-Control "public";

【参考方案5】：

对我来说，问题是我的 html 中有一个特殊字符“ß”：

<textarea
   id="start_location"
   defaultValue="Gerwigstraße 22, 76131 Karlsruhe"
/>

将默认值更改为"Gerwigstraße 22, 76131 Karlsruhe"，源地图又可以工作了。