webpack 捆绑包显示未定义后在浏览器中调用的对象答案

【问题标题】：Objects called in browser after webpack bundle show undefinedwebpack 捆绑包显示未定义后在浏览器中调用的对象
【发布时间】：2019-07-10 23:50:31
【问题描述】：

我是 webpack 的新手，我想在浏览器中使用 console.log 进行调试，并通过调用函数来查看什么是有效的，但是每当我在我的 js 文件被捆绑后尝试这样做时，一切都会显示为未定义。当文件捆绑在一起时，Webpack 必须以某种方式更改名称，所以即使我做了一个简单的 let x = 'hello'，我也无法 console.log 它，我什至无法调用我创建的任何函数而没有它们未定义当我在控制台中使用它们时。

我该如何解决这个问题，以便我可以调用我在控制台中创建的对象？这是我的简单 webpack 配置- 常量路径 = 要求（'路径'）； const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-source-map',
  mode: 'development',
  entry: {
      app:'./src/js/index.js',
      test:'./src/js/test2.js',
      create: './src/js/create.js'
    },
    devtool: 'source-map ',
    devServer: {
      contentBase: './dist',
      compress: true,
      port: 8080,
    },
    plugins: [
      new HtmlWebpackPlugin({
          title: 'Menu',
          template: './src/views/index.ejs',
      })
    ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
          {
           test: /\.scss$/,
           use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.jsnpm$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['@babel/preset-env', {
              'debug':true
            }]
          }
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
           use: [
           'file-loader'
          ]
        }
      ]
   },
};

【问题讨论】：

标签： javascript webpack module

【解决方案1】：

https://webpack.js.org/contribute/debugging/ 这将有助于深入调试 webpack！用于调试 webpack 的良好文档。如果您想使用浏览器进行调试，这可能会有所帮助： Configure webpack to allow browser debugging

希望这会有所帮助！

【讨论】：