Vue项目webpack打包报错：Module not found: Error: Can't resolve './src/todoItem'

问题描述

今天在学习vue单文件组件的打包，在运行 npm run build 打包出现报错。

ERROR in ./components/todoItem/index.js
Module not found: Error: Can't resolve './src/todoItem' in '*******'
 @ ./components/todoItem/index.js 1:0-38 3:15-23
 @ ./main.js

组件目录

components
└── todoItem
    ├── index.js
    └── src
        └── todoItem.vue

components/todoItem/index.js

import todoItem from './src/todoItem';
export default todoItem;

package.json

{
  "name": "vue_without_teamplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --open "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.0.2",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: "development",

    entry: {
        app: './main.js'
    },

    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].bundle.js'
    },

    devServer: {
        contentBase: './dist',
        hot: true
    },
    module: {
        rules: [
            // ... 其它规则
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 它会应用到普通的 `.js` 文件
            // 以及 `.vue` 文件中的 `