Я новичок в веб-пакете и хочу отлаживать, используя console.log в своем браузере и вызывая функции, чтобы посмотреть, что работает, но всякий раз, когда я пытаюсь сделать это после того, как мои js-файлы связаны, все отображается как неопределенное.Webpack должен каким-то образом менять имена, когда файлы объединяются вместе, поэтому, даже если я сделаю простой let x = 'hello', я не смогу console.log его и не могу даже вызвать любые функции, которые я создал, без их неопределенностикогда я использую их в консоли.
Как я могу это исправить, чтобы я мог вызывать объекты, которые я сделал в консоли?Вот мой простой веб-пакет config-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'
]
}
]
},
};