Question

我是webpack的新手，我想在浏览器中使用console.log进行调试，并通过调用函数来查看有效方法，但是，每当我将js文件打包后尝试执行此操作时，所有内容都显示为未定义。当文件捆绑在一起时，Webpack必须以某种方式更改名称，因此，即使我简单地让x ='hello'，我也无法进行console.log记录，甚至在未定义它们的情况下也无法调用我所做的任何函数当我在控制台中使用它们时。

如何解决此问题，以便可以调用在控制台中创建的对象？这是我简单的webpack配置- const path = require（'path'）; 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'
          ]
        }
      ]
   },
};

Answer 1

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

希望这会有所帮助！

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

1 个答案: