尝试直接使用Webpack打包Vue（Vue2）文件时遇到的问题

问题1

安装完各式各样的 loader 加载器后，然后把 webpack.config.js 里的配置内容复制拷贝一份，以为就完事大吉了，结果报错：
Module build failed (from ./node_modules/vue-loader/dist/index.js): TypeError: Cannot read property 'styles' of undefined
搜了一圈发现竟然没有什么相关内容，后来发现是安装的版本有问题！

• vue-loader@15.9.8 才能对应使用vue2.x版本
• vue和vue-template-compiler都要指定相同版本, 建议@2.6.12版本即可

我使用的是 Vue2 所以不匹配，但不是说 yarn 这些包管理工具会自己选择合适的版本安装吗？这种问题最烦人。

问题2

可以正常打包代码，但是我的 html 在浏览器里没有内容显示，解决：打包后生成的 js 文件 < script > 标签的位置应该是放到 #app 元素后面：

或者给 webpack 配置一个插件 html-webpack-plugin，它会生成html文件和自动添加 < script> 元素：

//webpack插件配置
plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' 
            // webpack生成dist/html网页, 要以template指定的文件作为模板
        }),
        new VueLoaderPlugin()
    ],

查看生成的html文件，其实也是把js放在前面，只不过添加了 defer 属性延迟加载了。

记录完了，拜拜，还是得注意下载安装的包有没有装好装对＜（＾－＾）＞

参考：
https://blog.youkuaiyun.com/weixin_45966674/article/details/122741695