Problem description

Today I am learning the package of vue single file component, but there is an error when running NPM run build package.

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.jsCopy the code

The component directory

├─ ├─ SRC ├─ trash ├─Copy the code

components/todoItem/index.js

import todoItem from './src/todoItem';
export default todoItem;
Copy the code

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"}}Copy the code

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: [
            / /... Other rules
            {
                test: /\.vue$/.loader: 'vue-loader'
            },
            // It will be applied to ordinary '.js' files
            // and the '
            {
                test: /\.js$/.loader: 'babel-loader'}},],plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'.filename: 'index.html'.template: './index.html'
        }),
        new CleanWebpackPlugin(),
        // Be sure to introduce this plugin!
        new VueLoaderPlugin()
    ],

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js' // to use webpack 1, use 'vue/dist/vue.com.js'}}},Copy the code

why

The root cause of the problem is that the file extension was not specified when importing the component. What a shame 😥, using scaffolding to build projects, components are imported when the extension name is not used, but there is no deep understanding of why the extension name can not be applied. Because the scaffold generated configuration file has the configuration for the extension of the module file:

module.exports = {
  / /...
  resolve: {
    // The following configuration will find matches for files that do not specify extensions
    extensions: [
        / /...
        '.js'.'.json'.'.vue']}};Copy the code

The solution

  1. Specify the extension name when importing the file

components/todoItem/index.js

- import todoItem from './src/todoItem';
+ import todoItem from './src/todoItem.vue';
    export default todoItem;
Copy the code
  1. Configure in the WebPack configuration file

webpack.config.js

module.exports = { //... Resolve: {alias: {'vue$': 'vue/dist/vue.js'}+ extensions: ['*', '.js', '.vue']}};Copy the code