webpack loader 从上手到理解系列：vue-loader（一）

原文地址

1 什么是 vue-loader

vue-loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件。

2 如何使用 vue-loader

2.1 安装

npm install vue-loader vue-template-compiler --save-dev

2.2 配置 webapck

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

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `

2.4 见证奇迹的时刻

打包完之后，这个 Vue 组件就会被解析到页面上：

  


  

    
Hello world
  
  

上面 Vue 组件里的