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` 文件中的 `<script>` 块
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: './index.html'
        }),
        new CleanWebpackPlugin(),
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ],

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        },
    }
}

原因

问题的根源是在导入组件时没有指定文件扩展名。真是惭愧😥，使用脚手架构建项目，组件导入的时候都是不用拓展名的，却又没有深究为什么可以不适用拓展名。因为脚手架生成的配置文件中有对模块文件的扩展名的相关配置：

module.exports = {
  //...
  resolve: {
    // 以下配置会将没指定拓展名的文件按如下类型查找匹配
    extensions: [
        //... 
        '.js', '.json','.vue'
    ] 
  }
};

解决方案

1. 在导入文件的时候指定拓展名

components/todoItem/index.js

-   import todoItem from './src/todoItem';
+   import todoItem from './src/todoItem.vue';
    export default todoItem;

1. 在webpack配置文件中配置

webpack.config.js

    module.exports = {
        
        //...
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
            },
+           extensions: ['*', '.js', '.vue']
        }
    };