手把手教你webpack3(12)VUE-LOADER配置简述

VUE-LOADER配置简述

前注:

文档全文请查看 根目录的文档说明。

如果可以,请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里,发【Issues】。

DEMO地址

0、使用说明

首先你得会用 Vue.js,不然可能对本文部分内容无法理解

安装:

npm install

运行:

// 开发模式(推荐使用这个)
npm run dev

// 普通模式(需要执行后手动刷新页面)
npm run test

单独安装 Vue-loader:

  1. 首先要有 Vue;
  2. 其次解析 vue 文件还要 vue-template-compiler
  3. 解析 css 内容当然还要 css-loader,以及配套的 style-loader
npm i --save vue
npm i --save vue-loader
npm i --save vue-template-compiler
npm i --save css-loader
npm i --save style-loader

通过以上安装,至少可以开始使用了

1、概述

简单来说,vue-loader 就是处理 .vue 文件的。

本文除了涉及到 webpack 中 vue-loader 的使用方法外,还包括 .vue 文件的一些独有使用方法。

但单独一个 vue-loader 并不能解决问题,因此还需要一些其他的东西。

【1】 vue-template-compiler:关于他的作用,根据 readme.md 文件中所介绍的:

This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. You will only need it if you are writing build tools with very specific needs. In most cases you should be using vue-loader or vueify instead, both of which use this package internally.

大致意思就是说,这个用于把 Vue 的模板文件(应该指.vue)预编译为渲染函数,避免运行时再编译带来的性能开销。

就是说 .vue 文件,在 js 执行时再拆开,然后使用是会消耗很多性能的。

一般情况下,不需要单独用他,用 vue-loader 就行了(但是你却需要单独安装他,安装 vue-loader 时是不带这个的)。

【2】 解析 css 内容当然还要 css-loader,以及配套的 style-loader

根据你的需要,可能还需要更多,但一般情况下,只需要你单独安装好这 2 个就行了(安装vue-laoder不会附带安装这 2 个)。

2、配置

2.1、默认配置

默认配置下,vue-loader只具备基础功能:

【1】.vue 文件拆解:

  • .vue 文件拆解成可用的三部分,然后扔到打包后的 .js 文件;

【2】HMR功能:

  • 默认支持 HMR 功能(DEMO里已预置,执行 npm run dev 可以通过使用);
  • 如果对规则感兴趣的,请参照官网说明:热重载 vue-loader

【3】css局部作用域:

  • 支持组件的 css 使用局部作用域,在 style 标签添加 scoped 即可。
  • 例如:,这样的话,该组件内的样式只会对该组件生效(原理是给对应的组件加指定属性名,然后 css 选择器里也加上属性选择器);
  • 支持在组件使用 scoped 属性的情况下,让某些样式影响子元素。方法是使用 /deep/>>> 关键字,该关键字前的选择器,会加局部作用域;该关键字后面的选择器,不会加局部作用域。例如.app /deep/ .child 会被编译为:··.app[data-v-04c2046b] .child··

【4】CSS Modules

  • 简单来说,就是可以将 标签内的东西,加了 module 属性后,可以直接在 vue 组件后,获取重命名后的类名。
  • 可以用作模拟 css 作用域的解决方案。
  • 详细说明见本文【3.1、CSS Modules】

需要额外配置才有的功能:

【1】es6代码转换成es5:

  • 通过配置,可以将

你可能感兴趣的:(webpack)