webpack配置vue-loader解析vue文件

2018.05.06 08:32 阅读 586 评论 0

现在大部分的打包工具用的仍然是webpack,vue的官方脚手架vue-cli就是利用webpack进行文件的构建打包。 webpack默认情况下不能解析vue文件进行打包。

下面介绍一下如何配置webpack来解析vue文件。 在webpack的配置文件webpack.config.js中,可以配置loaders,添加vue-loader

npm install vue-loader

安装好vue-loader后,在webpack.config.js中配置

module.exports = {
    // 其他配置省略
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  }
}

如果vue-loader的版本在v15以上,还需要额外配置VueLoaderPlugin,webpack.config.js的配置内容如下

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

module.exports = {
  module: {
    // 其他配置省略
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

注: 运行时报错Cannot find module 'vue-template-compiler',vue-loader需要配合vue-template-compiler

npm install vue-temlate-compiler -D

配置完成后,webpack就可以解析vue文件

0 条评论
发布