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;
複製代碼

2. 在webpack配置文件中配置

webpack.config.js

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