vue-loader的使用

前面的话

最近通过 《深入浅出webpack》学习webpack的使用，由于这本书编写的时候webpack还是3的版本，但现在webpack以及升级到4了，有些插件以及废弃了，
又或者需要配合其他插件使用，这里将学习过程中遇到的问题记录下来。

vue-loader的使用

• vue-loader的作用是解析和转换.vue文件，提取出其中的逻辑代码script，样式代码style以及HTML模板template，再分别将它们交给对应的loader去处理。

在webpack4中vue-loade已经更新到@15版本了，在使用vue-loader时，必须配合使用 Vue Loader 的插件：

在配置文件中引入：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
 plugins: [
    new VueLoaderPlugin()
  ],

完整的配置如下：

const path = require('path');
//使用vue-loader@15以上都需要使用vueloaderplugin这个插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        // 它会应用到普通的 `.js` 文件
        // 以及 `.vue` 文件中的 `<script>` 块
        {
          test: /\.js$/,
          loader: 'babel-loader'
        },
        // 它会应用到普通的 `.css` 文件
        // 以及 `.vue` 文件中的 `<style>` 块
        {
          test: /\.css$/,
          use: [
            'css-loader'
          ]
        }
      ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};

如果想看一下整个项目的结构可以小柒的github在拉取。