webpack正常打包

问题描述：

在vue中引入了一些组件如

import homeHeader from '@/components/header.vue'

用webpack打包会出现错误

 @ ./src/components/header.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/header.vue?vue&type=script&lang=js&) 71:0-44 76:4-11
 @ ./src/components/header.vue?vue&type=script&lang=js&
 @ ./src/components/header.vue
 @ ./src/main.js

产生错误原因

webpack.config.js中的resolve没有配置extensions选项

解决方案:

resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js', //内部为正则表达式  vue结尾的
            '@':path.resolve(__dirname, './src'),//用@表示--/src
        },
        extensions: ['.js', '.vue', '.json']
    },

这样就可以正常打包了！