Задать вопрос
@AlenaKarpolenko
изучаю JS

Почему ошибка при старте?

При команде yarn run start появляется ошибка. Что не так?
Подскажите...Скриншот фрагмента кола удален модератором.

мой package.json
{
  "name": "dnd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "lint": " eslint . --fix",
    "test": "jest",
    "coverage": "jest  --coverage",
    "ci": "start-test :8888 test",
    "doc": "jsdoc -c jsdoc.conf.json",
    "preshow:coverage": "npm run coverage",
    "show:coverage": "live-server coverage/lcov-report",
    "preshow:doc": "npm run doc",
    "show:doc": "live-server doc",
    "preshow:dist": "npm run build",
    "show:dist": "live-server dist"
  },
  "author": "coursar",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.16",
    "@babel/core": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.2.7",
    "eslint": "^7.20.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.5",
    "eslint-plugin-prettier": "^4.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.0.0",
    "html-webpack-plugin": "^5.1.0",
    "http-server": "^0.12.3",
    "image-webpack-loader": "^8.0.1",
    "jest": "^26.6.3",
    "mini-css-extract-plugin": "^1.6.2",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "prettier": "^2.2.1",
    "terser-webpack-plugin": "^5.2.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.62.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/types": "^7.16.0",
    "autoprefixer": "10.4.5",
    "core-js": "^3.19.1",
    "puppeteer": "^12.0.1",
    "start-server-and-test": "^1.14.0"
  }
}


webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

  entry: {
    polyfill: 'babel-polyfill',
    app: './js/app.js',
  },

  context: path.resolve(__dirname, 'src'),
  devServer: {
    publicPath: '/',
    port: 9000,
    contentBase: path.join(process.cwd(), 'dist'),
    host: 'localhost',
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    hot: true,
  },
  module: {

    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
        test: /\.js$/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',

            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [precss, autoprefixer],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },

  plugins: [

    new MiniCssExtractPlugin({
      filename: './style.css',
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  mode: 'development',
};
  • Вопрос задан
  • 86 просмотров
Подписаться 1 Средний 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы