Vue-loader: how to import *.vue files without .vue end

[k186]

when i use vue-cli i can import file like this

import app from './components/home'

but when i try to config my own webpack file in dev step by step with vue-loader it error that can't solve

import app from './components/home'

when i change that it works

import app from './components/home.vue'

this is baseconfig

var path = require('path');
var webpack = require('webpack');
var projectRoot=path.resolve(__dirname,'../');
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        filename: './static/js/[name].[hash].js',
        path: path.resolve(__dirname, '../dist')
    },
    resolve: {
        extensions: ['*', '.js', 'vue', '.json'],//in webpack 2.2 default resolve .js .json
        modules: [path.join(__dirname, 'src'), 'node_modules'],// add a directory search src/* over node_modules/
        alias:{
            //Create aliases to import or require certain modules more easily
            //for example in pageView import components may do like this import componentA from '../**/components/**/*.vue'
            //but use alias you can import like this import componentA  from 'components/**/*.vue'
            //watch more on https://webpack.js.org/configuration/resolve/
            components:path.resolve(__dirname,'../src/components'),
            assets:path.resolve(__dirname,'../src/assets'),
            src:path.resolve(__dirname,'../src'),
            vue$:'vue/dist/vue.common.js',
            pageView:'../src/pageView'
        }
    },
    module:{
        rules:[
            //json-loader is not required anymore by default
            {
                test:/\.js$/,
                loader:'babel-loader',
                //include:projectRoot,
                exclude:/node_modules/
            },
            {
                test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader:'url-loader',
                query:{
                    limit:10000,
                    name:'./static/img/[name].[hash:7].[ext]'
                }
            },
            {
                test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader:'url-loader',
                query:{
                    limit:10000,
                    name:'./static/fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins:[]
}

dev.config

var path = require('path');
var webpack = require('webpack');
var merge=require('webpack-merge');
var HtmlWebpackPlugin=require('html-webpack-plugin');
var webpackConfigBase = require("./webpack.base");

// add hot-reload related code to entry chunks
// simple like
Object.keys(webpackConfigBase.entry).forEach(function (name) {
    webpackConfigBase.entry[name] = ['./build/dev-client'].concat(webpackConfigBase.entry[name])
})

module.exports=merge(webpackConfigBase,{
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
        ]
    },
    // eval-source-map is faster for development
    //more on https://webpack.js.org/configuration/devtool/
    devtool: '#eval-source-map',
    plugins:[
        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
        // OccurrenceOrderPlugin is now on by default in webpack 2
        // new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
})

dev-server

var path = require('path');
var webpack = require('webpack');
var express = require('express');
var webpackConfig = require('./webpack.dev.config');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var port = 8080;


var app = express();

var compiler = webpack(webpackConfig);


var devMiddleware = webpackDevMiddleware(compiler, {
    publicPath: "/",
    stats: {
        colors: true,
        chunks: false
    }
});
var hotMiddleware = webpackHotMiddleware(compiler);

//force reload page when html-webpack-plugin template changes index.html
//https://github.com/jantimon/html-webpack-plugin
compiler.plugin('compilation',function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit',function (data, cb) {
        hotMiddleware.push({action:'reload'});
        cb();
    })
});

app.use(devMiddleware);

app.use(hotMiddleware);

module.exports=app.listen(port, function (err) {
    if(err){
        console.log(err);
        return
    }
    var url='http://localhost:'+port;
    console.log("Listening at http://localhost: " + port);
    //todo open url
});

the client file is same as vue-cli

can you tell me how can i fix it , some webapck documention or es6 something i should to learn ? thank you

[airyland]

extensions: ['*', '.js', 'vue', 'json']

=>

extensions: ['*', '.js', '.vue', '.json']

[k186]

@airyland it still doesn't work
Module not found: Error: Can't resolve 'components/home/home' in 'F:\TempWork\webpacktut\src\router'

it seems that i have some problem with vue-loader

[airyland]

@k186 明显你路径写错了吧，出错也应该是

Can't resolve 'components/home'
而不是
Can't resolve 'components/home/home'

另外，上面也有单词错误 compoents

[k186]

@airyland said my import path is wrong,the */home/home should be */home and The word of 'components' is misspelled

my directory structure like this
.scr/components/home/home.vue

so, my import path is right,
and i decided to start a new config of webpack

[k186]

my webpack config base have some logical problem i try another new config it's work fine .

[ozanmuyes]

@k186 and @airyland why don't you speak English so that anybody who doesn't speak your language can understand?

[k186]

@ozanmuyes sorry for that .i would edit it to English