When I run npm run build, below error occurs.

ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 9:0-51
Module not found: Error: Can't resolve '../components/header/index.js' in 'MyProject/src'
 @ ./src/App.vue?vue&type=script&lang=js& 1:0-157 1:173-176 1:178-332 1:178-332
 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
 @ ./src/main.js 3:0-28 29:13-16

ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 10:0-50
Module not found: Error: Can't resolve '@/components/footer/index.js' in 'MyProject/src'
 @ ./src/App.vue?vue&type=script&lang=js& 1:0-157 1:173-176 1:178-332 1:178-332
 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
 @ ./src/main.js 3:0-28 29:13-16

ERROR in ./src/main.js 6:0-33
Module not found: Error: Can't resolve '@/assets/scss/main.scss' in 'MyProject/src'

package.json

  "scripts": {
    "build": "webpack --config build/webpack.config.dev.js"
  },

build/webpack.config.dev.js

'use strict'

const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: [
    './src/main.js'
  ],
  devServer: {
    hot: true,
    watchOptions: {
      poll: true
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]
}

src/App.vue

<template>
  <div id="app">
     <Header />
    <router-view />
    <Footer/>
  </div>
</template>

<script type="text/javascript">
import Header from "@/components/header/index.js";
import Footer from "@/components/footer/index.js";

export default {
  components: {
    Header,
    Footer
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/main.scss";
</style>

How to solve it?