vue-loader做了哪些事情？-阿里云开发者社区

vue-loader 的使用配置

使用 vue-loader 的之前，需要安装一些必要的 loader

必需的 loader 包括：vue-loader、vue-style-loader、vue-template-compiler、css-loader。可能需要的 loader 包含：sass-loader、less-loader、url-loader 等。

一个包含 vue-loader 的简单 webpack配置 如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const isProduction = process.env.NODE_ENV === 'production'
const extractLoader = {
    loader: MiniCssExtractPlugin.loader,
    options: {
        publicPath: '../',
        hmr: process.env.NODE_ENV === 'development'
    },
}
const cssExtractplugin = new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
    ignoreOrder: false
})
const webpackConfig = {
    entry: {...},
    output: {...},
    optimization: {...},
    resolve: {...},
    modules: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.css$/,
            oneOf: [{
                resourceQuery: /\?vue/,
                use: [isProduction ? extractLoader  : 'vue-style-loader', 'css-loader']
            }, {
                use: [isProduction ? extractLoader  : 'style-loader', 'css-loader']
            }]
        },
        ...
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        isProduction ? cssExtractplugin : ''
    ]
}

注意，当使用的 vue-loader 版本为 15.x.x 时，必须使用 vue-loader 提供的 VueLoaderPlugin。

vue-loader 工作原理

通过 vue-loader， webpack 可以将 .vue 文件 转化为 浏览器可识别的javascript。

vue-loader 的工作流程，简单来说，分为以下几个步骤:

将一个 .vue 文件 切割成 template、script、styles 三个部分。
template 部分 通过 compile 生成 render、 staticRenderFns。
获取 script 部分 返回的配置项对象 scriptExports。
styles 部分，会通过 css-loader、vue-style-loader，添加到 head 中，或者通过 css-loader、MiniCssExtractPlugin 提取到一个 公共的css文件 中。

5.使用 vue-loader 提供的 normalizeComponent 方法，合并 scriptExports、render、staticRenderFns，返回构建vue组件需要的配置项对象 - options，即 {data, props, methods, render, staticRenderFns...}。

通过 vue-loader 生成的 js 文件 如下:

// 从 template区域块 获取 render、 staticRenderFns 方法
import { render, staticRenderFns } from "./App.vue?vue&type=template&id=7ba5bd90&scoped=true&"
// 从 script区域块 获取 组件的配置项对象
import script from "./App.vue?vue&type=script&lang=js&"
export * from "./App.vue?vue&type=script&lang=js&"
// 获取 styles区域块的内容
import style0 from "./App.vue?vue&type=style&index=0&lang=css&"
// 获取 styles(scoped)区域块的内容
import style1 from "./App.vue?vue&type=style&index=1&id=7ba5bd90&scoped=true&lang=css&"
/* normalize component */
import normalizer from "!../node_modules/_vue-loader@15.7.1@vue-loader/lib/runtime/componentNormalizer.js"
// 返回构建组件需要的配置项对象， 包含 data、props、render、staticRenderFns 等
var component = normalizer(
  script,
  render,
  staticRenderFns,
  false,
  null,
  "7ba5bd90",
  null
)
component.options.__file = "src/App.vue"
// 输出组件完整的配置项
export default component.exports

css scoped

当 .vue 文件 中的 style 标签 有 scoped 属性时，它的 css 样式 只作用于当前组件中的元素。

css scoped 的 工作流程 如下:

1.使用 vue-loader 处理 .vue 文件，根据 .vue 文件的请求路径和文件内容，生成 .vue 文件的 hash 值, 如：7ba5bd90；

2.如果 .vue 文件的某一个 style 标签有 scoped 属性，为 .vue 文件生成一个 scopedId，scopedId 的格式为 data-v-hash，如：data-v-7ba5bd90；

3.使用 vue-loader 从 .vue 文件中获取 style区域块(scoped) 的样式内容(字符串)；如果使用了 less 或者 sass，要使用 less-loader 或者 sass-loader 处理样式内容，使样式内容变为浏览器可识别的css样式；然后使用 PostCSS 提供的 parser 处理样式内容，为样式内容中的每一个 css选择器添加 [data-v-hash]；再使用 css-loader；最后使用 style-loader 把 css 样式添加到 head 中或者通过 miniCssExtractPlugin 将 css 样式提取一个公共的 css 文件中。

4.通过 normalizer 方法返回完整的组件配置项 options， options 中有属性 _scopeId, 如 _scopedId: data-v-7ba5bd90;

5.使用组件配置项 options 构建组件实例，给组件中每一个 dom元素添加属性: data-v-hash。

经历上述过程，style(scoped) 中的样式就变成了 组件的私有样式。

深度作用选择器

我们可以通过 >>> 操作符，在组件中修改 子组件 的 私有样式。

// child component
.hello {...}
// parent component 
<style scoped>
    .parant .hello {...}
    .parent >>> .hello {...}
</style>
// 进过 postCSS 处理以后的 css
.parent .hello[data-v-xxx] {...}  // 无法影响子组件
.parant[data-v-xxx] .hello {....} // 可影响子组件

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下我们可以使用 /deep/ 或 ::v-deep 操作符取而代之，两者都是 >>> 的别名，同样可以正常工作。

深度作用选择器，必须在含有 scoped 属性的 style 标签中使用，否则无效。这是因为 >>>、/deep/、::v-deep 需要被 postCSS 解析才能起作用。只有 style 标签中有 scoped 属性，样式内容才会被 postCSS 解析。

postCSS 解析样式内容的时候，会给 >>> 操作符前面的 css选择器添加 [data-v-hash]。

注意：父组件中修改子组件的私有样式时，父组件中的样式的优先级要大于子组件中的样式的优先级，否则会导致父组件中定义的样式不生效。

CSS Modules

我们也可以在 .vue 文件 的 style 标签 上添加 module 属性，使得 style 标签 中的样式变为 组件私有，具体使用方法详见 - 官网。

css modules 和 css scoped 都可以使样式变为组件私有，但是原理不一样。

css scoped 的实质是利用 css属性选择器使得样式称为局部样式，而 css modules 的实质是让样式的类名、id名唯一使得样式称为局部样式。

css modules 的工作流程如下:

1.使用 vue-loader 处理 .vue 文件，将 .vue 文件内容转化为 js 代码。如果 .vue 文件中的 style 标签中有 module 属性，向 js 代码中注入一个 injectStyle 方法，如下：

import { render, staticRenderFns } from "./App.vue?vue&type=template&id=3512ffa2&scoped=true&"  
import script from "./App.vue?vue&type=script&lang=js&"  
export * from "./App.vue?vue&type=script&lang=js&"  
import style0 from "./App.vue?vue&type=style&index=0&module=a&lang=css&"  
import style1 from "./App.vue?vue&type=style&index=1&id=3512ffa2&module=true&scoped=true&lang=css&"  
// 通过injectStyle方法， 会向vue实例中添加属性  
function injectStyles (context) {  
    // 对应 <style module="a">...</style>  
    // 给vue实例添加属性a， 对应的值为使用css-loader处理样式内容以后返回的对象  
    this["a"] = (style0.locals || style0)  
    // 对应 <style module>...</style>  
    // 给vue实例添加属性$style, 对应的值为使用css-loader处理样式内容以后返回的对象  
    this["$style"] = (style1.locals || style1)  
}  
/* normalize component */  
import normalizer from "!../node_modules/_vue-loader@15.7.1@vue-loader/lib/runtime/componentNormalizer.js"  
// normalize 会返回一个组件完整配置项对象  
// 在执行过程中， 会将render方法重新包装成 renderWithStyleInjection 方法  
// 执行 renderWithStyleInjection 方法时的时候， 先执行 injectStyles 方法， 再执行 原来的render 方法  
var component = normalizer(  
  script,  
  render,  
  staticRenderFns,  
  false,  
  injectStyles,  
  "3512ffa2",  
  null  
)  
export default component.exports"

使用 css-loader 处理 .vue 文件 的 style 区域块，会将 style 区域块 中的样式内容，转化为 js 代码，如下:

exports = module.exports = require("../node_modules/_css-loader@3.2.0@css-loader/dist/runtime/api.js")(false);  
// Module  
exports.push([module.id, "\n#_3cl756BP8kssTYTEsON-Ao {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n._3IbrnaW__7RJMXk4rh9tW- {\n  background-color: blue;\n}\n", ""]);  
// Exports  
exports.locals = {  
    // app是id名  
  "app": "_3cl756BP8kssTYTEsON-Ao",  
  // class 是 类名  
  "class1": "_3IbrnaW__7RJMXk4rh9tW-"  
}

在处理过程中， css-loader 会将样式中的类名、id名 等用一个 唯一的命名代替。

在执行 步骤1 的代码时，会执行上面的代码，返回一个对象，即 步骤一 中的 style0 、style1，格式如下:

// css样式内容会通过 style-loader 提供的方法添加到 head 中  
// 或者被 miniCssExtractPlugin 提取到一个 公共的css文件 中  
style0 = [[css模块 id, css样式内容字符串, ''], ...]  
style0.locals = {  
    "app": "_3cl756BP8kssTYTEsON-Ao",  
  "class1": "_3IbrnaW__7RJMXk4rh9tW-"  
}

运行项目执行打包以后的js代码，即步骤1中的代码，获取 render、staticRenderFns、scriptExprots、 style0、style1，然后通过 normalizer 方法返回组件完整配置项 - options。在执行过程中，将 render 方法重新包装成 renderWithStyleInjection 方法。

构建 vue 实例时，执行 renderWithStyleInjection 方法，此时会先执行 injectStyles 方法，给 vue 实例添加 $style、a 属性，属性值为 stlye0.locals、style1.locals，再执行原来的 render 方法。

这样，我们就可以通过 vue 实例的 $style、a 属性访问样式的类名、id名。

热更新

开发模式下，当使用 vue-loader、 vue-style-loader 处理 .vue 文件的时候，会向生成的js代码中注入与热更新相关的代码逻辑。当我们修改 .vue 文件时， dev-server 会通知浏览器进行热更新。

.vue 文件的各个区域块(template、script、styles) 对应的热更新逻辑都不一样。

template & script

vue-loader 会在打包代码中注入热更新 template、script 区域块的代码，如下:

// 从 template区域块 获取 render、 staticRenderFns 方法  
import { render, staticRenderFns } from "./App.vue?vue&type=template&id=7ba5bd90&scoped=true&"  
// 从 script区域块 获取 组件的配置项对象  
import script from "./App.vue?vue&type=script&lang=js&"  
export * from "./App.vue?vue&type=script&lang=js&"  
// 获取 styles区域块的内容  
import style0 from "./App.vue?vue&type=style&index=0&lang=css&"  
// 获取 styles(scoped)区域块的内容  
import style1 from "./App.vue?vue&type=style&index=1&id=7ba5bd90&scoped=true&lang=css&"  
/* normalize component */  
import normalizer from "!../node_modules/_vue-loader@15.7.1@vue-loader/lib/runtime/componentNormalizer.js"  
// 返回构建组件需要的配置项对象， 包含 data、props、render、staticRenderFns 等  
var component = normalizer(  
  script,  
  render,  
  staticRenderFns,  
  false,  
  null,  
  "7ba5bd90",  
  null  
)  
/* hot reload */  
// .vue 文件的 script 区域块更改时， 客户端执行这一段代码  
if (module.hot) {  
  var api = require("D:\\study\\demo\\webpack\\webpack-4-demo\\node_modules\\_vue-hot-reload-api@2.3.3@vue-hot-reload-api\\dist\\index.js")  
  api.install(require('vue'))  
  if (api.compatible) {  
    module.hot.accept()  
    if (!api.isRecorded('7ba5bd90')) {  
      api.createRecord('7ba5bd90', component.options)  
    } else {  
      // 执行 reload 方法， 触发更新  
      // 使用 新的 options 替换原来的 options  
      api.reload('7ba5bd90', component.options)  
    }  
    module.hot.accept("./App.vue?vue&type=template&id=7ba5bd90&scoped=true&", function () {  
      // 当 .vue 文件的 template 区域块更改时， 客户端执行这一段代码  
      // 使用新的 render、staticRenderFns 更新原来的render、staticRenderFns  
      api.rerender('7ba5bd90', {  
        render: render,  
        staticRenderFns: staticRenderFns  
      })  
    })  
  }  
}  
component.options.__file = "src/App.vue"  
// 输出组件完整的配置项  
export default component.exports

如果我们只修改了 .vue 文件的 script 部分，客户端(即浏览器) 会进行热更新，过程如下：

1.服务端通过 websocket 连接通知客户端更新；

2.客户端通过动态添加script元素的方式获取更新以后的打包文件；

3.安装打包文件，即执行新的打包文件中的 js 代码，使用打包文件中的 module 更新浏览器缓存的同名 module；

4.重新安装组件对应的 module，即重新执行组件对应的js代码，获取 render、staticRenderFns 和新的 scriptExports，重新生成组件对应的完整配置项；

5.执行 api 提供的 reload 方法，更新组件。

在 reload 方法中，会通过执行父组件实例的 $forceUpdate 方法来更新组件。

更新组件的时候，由于组件的配置项(data、props、methods等属性) 发生变化，需要为组件生成新的构造函数 VueComponent，然后使用新的构造函数，构建新的组件实例。

即，每次修改 .vue 文件的 script 部分，都会为组件生成一个新的实例对象，销毁旧的实例对象。

如果我们只修改了 .vue 文件的 template 部分, 客户端(即浏览器) 会进行热更新，过程如下：

6.同上，服务端通过 websocket 连接通知客户端更新；

7.同上，客户端通过动态添加script元素的方式获取更新以后的打包文件；

8.同上，安装打包文件，即执行新的打包文件中的 js 代码，使用打包文件中的 module 更新浏览器缓存的同名 module；

9.触发通过 module.hot.accept 注册的 callback；

10.执行 api 提供的 rerender 方法，更新组件。

执行 rerender 方法时，会先获取修改以后的template区域块对应的 render、staticRenderFns，然后更新原组件的 render、staticRenderFns，然后执行组件实例的 $forceUpdate 方法来更新组件(更新组件的时候，会使用新的render方法，生成新的vnode节点树)。

如果我们同时修改了 .vue 文件的 template、 script部分，会按照上面第一种情况进行热更新，并且不会触发上面代码中通过 module.hot.accept 注册的 callback。

style

vue-style-loader 会在打包代码中注入热更新 style区域块的代码，如下:

...  
var add = require("!../node_modules/_vue-style-loader@4.1.2@vue-style-loader/lib/addStylesClient.js").default  
var update = add("05835b6f", content, false, {});  
// Hot Module Replacement  
if(module.hot) {  
 // When the styles change, update the <style> tags  
 if(!content.locals) {  
   module.hot.accept("!!../node_modules/_css-loader@3.1.0@css-loader/dist/cjs.js!../node_modules/_vue-loader@15.7.1@vue-loader/lib/loaders/stylePostLoader.js!../node_modules/_vue-loader@15.7.1@vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=css&", function() {  
     // 当 .vue 文件的 styles 区域块更改时， 客户端执行这一段代码  
     var newContent = require("!!../node_modules/_css-loader@3.1.0@css-loader/dist/cjs.js!../node_modules/_vue-loader@15.7.1@vue-loader/lib/loaders/stylePostLoader.js!../node_modules/_vue-loader@15.7.1@vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=css&");  
     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];  
     // 执行update方法， 更新styles  
     update(newContent);  
   });  
 }  
}  
...

如果我们修改了 .vue 文件的 styles 区域块，客户端(即浏览器) 会进行热更新，过程如下：

1.同上，服务端通过 websocket 连接通知客户端更新；

2.同上，客户端通过动态添加script元素的方式获取更新以后的打包文件；

3.同上，安装打包文件，即执行新的打包文件中的 js 代码，使用打包文件中的 module 更新浏览器缓存的同名 module;

4.触发通过 module.hot.accept 注册的 callback；

5.执行 update 方法，更新样式。

更新样式的时候，会先移除原来的 style 标签，然后添加新的 style 标签。

如果 style 标签上有 module 属性，除了 vue-style-loader 会注入热更新代码外，vue-loader 也会在打包代码中注入热更新代码，如下:

    // 热更新代码  
    module.hot && module.hot.accept(["./App.vue?vue&type=style&index=1&id=7ba5bd90&module=true&scoped=true&lang=css&"], function () {  
      // 当.vue的style区域块发生变化， 且style标签有module属性， 执行这一段逻辑  
      var oldLocals = cssModules["$style"]  
      if (oldLocals) {  
        // 获取新的唯一类名、id名  
        var newLocals = require("./App.vue?vue&type=style&index=1&id=7ba5bd90&module=true&scoped=true&lang=css&")  
        if (JSON.stringify(newLocals) !== JSON.stringify(oldLocals)) {  
          // 更新vue实例的$style属性  
          cssModules["$style"] = newLocals  
          // 执行vue实例的 $forceUpdate 方法，重新执行 render 方法  
          require("D:\\study\\demo\\webpack\\webpack-4-demo\\node_modules\\_vue-hot-reload-api@2.3.3@vue-hot-reload-api\\dist\\index.js").rerender("7ba5bd90")  
        }  
      }  
    })

执行上述热更新代码，会更新 vue实例的 $style 属性，然后触发 vue 实例的 $forceUpdate 方法，重新渲染。

一个 style 区域块对应一个 style 标签。修改某一个 style 区域块之后，会更新对应的 style 标签。

style 区域块的热更新和 template、script 区域块的热更新互不影响。

tree shaking 副作用

生产模式下， webpack 默认启用 tree shaking。如果此时项目根目录中的 package.json 中的 sideEffects 的值为 false，且 .vue 文件的 style 标签没有 module 属性，使用 vue-loader 处理 .vue 文件的时候，会产生样式丢失的情况，即 styles 区域块不会添加到 head 中或者被提取到公共的css文件中。

首先，先看一下 .vue 文件经过处理以后生成的 js代码，如下:

// 从 template区域块 获取 render、 staticRenderFns 方法
import { render, staticRenderFns } from "./App.vue?vue&type=template&id=7ba5bd90&scoped=true&"
// 从 script区域块 获取 组件的配置项对象
import scriptExports from "./App.vue?vue&type=script&lang=js&"
export * from "./App.vue?vue&type=script&lang=js&"
// 获取 styles区域块的内容
import style0 from "./App.vue?vue&type=style&index=0&lang=css&"
// 获取 styles(scoped)区域块的内容
import style1 from "./App.vue?vue&type=style&index=1&id=7ba5bd90&scoped=true&lang=css&"
/* normalize component */
import normalizer from "!../node_modules/_vue-loader@15.7.1@vue-loader/lib/runtime/componentNormalizer.js"
// 返回构建组件需要的配置项对象， 包含 data、props、render、staticRenderFns 等
var component = normalizer(
  scriptExports,
  render,
  staticRenderFns,
  false,
  null,
  "7ba5bd90",
  null
)
component.options.__file = "src/App.vue"
// 输出组件完整的配置项
export default component.exports

在上面的代码中，template 区域块返回的 render、staticRenderFns， script 区域块返回的 scriptExports，都有被 normalizer 方法使用，而 styles 区域块返回的 style0、style1 则没有被使用。在打包代码的时候， tree shaking 就会自动移除 styles 区域块对应的代码，导致样式丢失。

解决方法:

1.修改 package.json 文件中的 sideEffects 属性，告诉 webpack .vue 文件在使用 tree shaking 的时候会有副作用，如下:

"sideEffects": [  
    "*.vue"  
 ]

有了上述配置， webpack 在处理 .vue 文件的时候，不会使用 tree shaking，不会出现样式丢失的问题。

但是这种解决方法有一个问题，如果 script 区域块中通过 import 的方式引入了未使用的模块，未使用的模块在最后打包代码的时候不会被删除。

1.通过 rule.sideEffects 指定具体的模块在使用 tree shaking 的时候会有副作用，如下:

    // webpackConfig：  
    {  
        test: /\.css$/,  
        oneOf: [{  
            resourceQuery: /\?vue/,  
            // 指定.vue文件的 style区域块 使用 tree shaking 时会有副作用  
            sideEffects: true,  
            use: [isProduction ? MiniCssExtractPlugin.loader  : 'vue-style-loader', 'css-loader']  
        }, {  
            use: [isProduction ? MiniCssExtractPlugin.loader  : 'style-loader', 'css-loader']  
        }]  
    },  
    {  
        test: /\.scss$/,  
        oneOf: [{  
            resourceQuery: /\?vue/,  
            // 指定.vue文件的 style(lang=scss)区域块 使用 tree shaking 时会有副作用  
            sideEffects: true,  
            use: [isProduction ? MiniCssExtractPlugin.loader  : 'vue-style-loader', 'css-loader', 'sass-loader']  
        }, {  
            use: [isProduction ? MiniCssExtractPlugin.loader  : 'style-loader', 'css-loader', 'sass-loader']  
        }]  
    }  
    // package.json  
    {  
        sideEffects: false  
    }

上述配置，明确说明了 .vue 文件的 style 区域块在使用 tree shaking 的时候，会有副作用，在打包的时候不会删除。

这样的话，样式不会丢失，并且如果 script 区域块中通过 import 的方式引入了未使用的模块，未使用的模块在最后打包代码的时候会被删除

vue-loader做了哪些事情？

vue-loader 的使用配置

vue-loader 工作原理

css scoped

深度作用选择器

CSS Modules

热更新

tree shaking 副作用

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

vue-loader做了哪些事情？

vue-loader 的使用配置

vue-loader 工作原理

css scoped

深度作用选择器

CSS Modules

热更新

tree shaking 副作用

热门文章

最新文章

相关课程

相关电子书