webpack使用2

-----《App.vue》-------
<template>
    <div>
        <p>this vue app</p>
        <img :src="‘./dist/‘+img" alt="hh">
    </div>
</template>
<script>
import img from ‘./static/images/cat.jpeg‘ //导入一张图片，入口文件使用了这个App.vue，解析到App组件中用了图片资源，那么webpack就会去配置文件中找是否有对该类型文件做打包处理。有就打包，没有就报错
export default {
    name:‘App‘,
    img:‘‘,
    created(){
        this.img = img;
        console.log(this.img)
    }
}
</script>
<style scoped>

</style>

const path = require(‘path‘)

const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘)
    //官网除了表示配置打包规则rules，还要实例化一个vueloader插件

module.exports = { //导出一个对象
    mode: ‘development‘,
    entry: ‘./src/main.js‘, //打包入口
    /*打包出口,一个对象，指定
    filename：打包后的js名
    path，打包后的路径
    */
    output: {
        filename: ‘bundle.js‘,
        path: path.resolve(__dirname, ‘dist‘)
            /*由于这里需要绝对路径，需要用到nodejs种的path模块
            __dirname 表示当前文件夹的绝对路径，
            这里表示在项目跟目录下新建dist文件作为打包后存放路径
            */
    }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
    module: {
        rules: [{
            test: /\.vue$/, // 正则表示匹配.vue结尾的文件
            loader: ‘vue-loader‘,
        }, { //配置文件loader，用于打包图片资源，默认打包生产的文件命名是 hash字符串命名的，可以在选项中配置打包后的文件名
            test: /\.(jpg|jpeg|png|gif)$/,
            loader: ‘file-loader‘,

        }]
    },
    plugins: [
        new VueLoaderPlugin(), //vue插件实例
    ],
    resolve: { //表示一些解决方案
        alias: { //别名
            ‘vue‘: ‘vue/dist/vue.js‘, //这里表示导入vue时，导入此处指定路径下的文件
        }
    }
}