Я пытаюсь запустить свое приложение activ.js с помощью веб-пакета.В этом проекте есть такие файлы: index.html, index.js, styles.css, package.json, .txt, webpack.config.js и одна папка с изображениями.Проект работал хорошо без webpack, но когда я использую webpack, после команды «npm run dev» я получаю пустую страницу браузера (localhost: 8080), мой проект не отображается.Я много раз менял свой файл webpack.config.js, но результат тот же.Вот моя самая большая версия конфигурационного файла:
var path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, './public'),
publicPath: '/public/',
filename: 'bundle.js'
},
resolve: {
modules: ['node_modules']
},
module:{
rules:[
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options : {
presets:["@babel/preset-env", "@babel/preset-react"]
}
}, {
test: /\.html$/,
loader: 'html-loader'
}, {
test: /\.(png|jpe?g|gif)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}, {
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'CanvasReactGit/index.html'
}),
new MiniCssExtractPlugin({
filename: "bundle.css"
}),
new UglifyJSPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
htmlLoader: {
minimize: false
}
})
]
}
А вот файл package.json:
{
"name": "reactwebpackproject",
"description": "A react.js project with webpack",
"version": "1.0.0",
"author": "Irina",
"scripts": {
"dev": "webpack-dev-server --hot --open",
"build": "webpack"
},
"dependencies": {
"react": "^16.5.0",
"react-dom": "^16.5.0"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"babel-loader": "^8.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^3.2.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"mini-css-extract-plugin": "^0.4.4"
}
}
А вот вывод консоли:
А команда «npm run build» отображает модальное окно с ошибкой и говорит, что объект предполагается.В чем причина проблем с этим веб-пакетом?