Babel.js 源Map不适用于Webpack

l7mqbcuq 于 2023-06-27 发布在 Babel

关注(0)|答案(6)|浏览(210)

我对webpack还很陌生，在配置它以生成必要的源代码Map时遇到了一些麻烦。在devtools中它说
检测到源Map
但它显示的是bundle，而不是原始代码：

下面是我的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
};

这是我的包。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，但没有运气。
任何帮助将是伟大的！

babeljs

来源：https://stackoverflow.com/questions/37928165/source-maps-not-working-with-webpack

6条答案

按热度按时间

ebdffaop1#

在bundle.js中，您将看到原始的转译webpack包-这是正常的行为。
打开webpack://，您将看到您的项目文件。

赞(0）回复(0）举报 2023-06-27

s4chpxco2#

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

devtool: "#inline-source-map",

你可以在webpack网站上找到关于它的详细信息：https://webpack.js.org/configuration/devtool/
另外，请从webpack网站上找到附加的sourcemap部分的屏幕截图。

赞(0）回复(0）举报 2023-06-27

kiayqfof3#

确保在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
    }
}

赞(0）回复(0）举报 2023-06-27

mnowg1ta4#

我遇到的问题是我的nginx配置。我的nginx配置为源Map文件抛出404，因为它无法识别要查找的.map文件。因此，除了.js|.css之外，还添加了.map，并且它是固定的。

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

赞(0）回复(0）举报 2023-06-27

9q78igpj5#

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

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

已将默认值更改为"Gerwigstraße 22, 76131 Karlsruhe"，源Map再次正常工作。

赞(0）回复(0）举报 2023-06-27

xzlaal3s6#

如果'source-map'不起作用，您可以尝试'inline-source-map'：

devtool: 'inline-source-map',

或者如果你仍然想使用'source-map'，你可以尝试在你的插件中添加这一行：

plugins: [
...
new webpack.SourceMapDevToolPlugin({
  test: new RegExp('\.[js|css|mjs].*')
})

]，

赞(0）回复(0）举报 2023-06-27

我来回答

Babel.js 源Map不适用于Webpack

6条答案

相关问题

热门标签

最新问答