webpack中配置.vue组件页面踩坑总结

第一次用vscode第一次配webpack第一次写vue的菜鸟踩坑之路

前提是已经装好npm，全局安装webpack和cnpm i vue 而且已经能够使用webpack打包文件，然后想在webpack中写vue组件
1.啥也不懂的菜鸟按照网上的写法写好了一个“我是0还是1”的APP.vue文件，然后运行webpack .\src\main.js .\dist\bundle.js --mode development后，无法解析.vue并报错：

You may need an additional loader to handle the result of these loaders.      
<div class="panda">
       <li>{{msg}}0</li>
 @ ./src/App.vue 1:0-82 11:2-8 12:2-17
 @ ./src/main.js

**解决方法：**初步配置

1. 运行cnpm i vue -S
2. 运行cnpm i vue-loader vue-template-compiler -D
3. 运行 cnpm i vue-loader-plugin -S//webpack新版都要这个的！我在这个坑里躺了一下午！
4. 运行cnpm i style-loader css-loader -D
5. 创建webpack.config.js文件，内容如下：

// An highlighted block
const path = require('path')
const VueLoaderPlugin = require('./node_modules/vue-loader/lib/plugin.js')

module.exports={
    plugins: [
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            {test:/\.vue$/, use: 'vue-loader'},
        ],
    },
}

！！！注意：如果运行打包命令以后还出错，可能是文件路径以及文件后缀名的问题，不要轻易和其它大神省掉文件后缀名，因为你没配置相关的语句，简单来说就是你不配啊！

2.填完这些坑后，一般的菜鸟应该已经可以清楚的看到自己是0还是1了，但是！我不是一般的菜啊！虽然再次运行打包命令显示已经成功，但是打开浏览器还是个白板。
此时，我打开调试窗口显示
vue.js:633 [Vue warn]: Cannot find element: #app
是时候展示自己真正的菜了！
为什么没有找到#app呢，[正经] 因为我把引入的js文件放在head里，导致文件未加载完成就运行js文件，所以就找不到 #app 。

解决方案： 把js文件放在文档末尾，“保证页面全部渲染完成才加载js”

好了终于看到我是0还是1了！

完整代码显示：