Webpack配置vue组件的加载器（vue-loader）报错解决

首先介绍一下如何使用webpack来配置vue组件。

• 第一步：在终端运行npm i vue-loader vue-template-compiler -D，安装处理vue组件的加载器，其中vue-template-compiler -D是vue-loader的内置依赖项。
• 第二步：在项目的webpack.config.js文件中添加vue-loader的配置：
  ①首先需要导入vue组件插件：

const VueLoaderPlugin = require('vue-loader/lib/plugin.js')

②然后添加插件：

 plugins: [new VueLoaderPlugin()]

③添加loader规则：

module: {
        rules: [
                       { test: /\.vue$/, loader: 'vue-loader' }
        ]
    }

• 第三步：打包运行npm run dev，结果报错Cannot find module ‘hash-sum’，如下所示：
  
  根据提示说找不到模块’hash-sum’，又因为hash-num是vue-style-loader用到的依赖，是使用scoped属性时用来计算hash值的，所以安装一下vue-style-loader就可以解决这个问题。npm i vue-style-loader -D
  
• 第四步，再次打包运行，结果报错Cannot find module ‘@vue/component-compiler-utils’，如下图所示：
  
  同样道理安装这个模块插件即可解决问题：npm i @vue/component-compiler-utils -D
  
• 第五步：再次打包运行，结果报错Cannot find module ‘vue-hot-reload-api’（还好心态没有崩），如下图所示：
  
  安装这个模块插件即可解决问题：npm i vue-hot-reload-api -D
  
  最后再次运行就可以成功。之所以会出现这些问题，找到的可能原因是npm3之后的版本不会自动安装peerDependencies，所以才会缺少很多依赖。