vue-loader配置项_javascript_weixin

官方地址： vue-loader.vuejs.org/zh/
vue-loader是webpack的一个loader，它允许你以一种 单文件组件的格式撰写Vue组件
关于vue-loader的使用，在module的rules中关于vue-loader的options各种配置，可以参考（ vue-loader.vuejs.org/zh/options.…）

1.Scoped CSS

当<style>标签有scoped属性时，表示它的css只作用于当前的组件中的元素。这类似于Shadow DOM中的样式封装。它有一些注意事项，但不需要任何polyfill。它通过使用PostCss来实现以下转换：

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>


//利用PostCSS转换以后：
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
复制代码

可以在一个组件内同时使用scoped和非scoped样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>复制代码

如果你希望scoped样式中的一个选择器能够作用的更深，例如影响子组件，可以使用>>>操作符

<style scoped>
   .a >>> .b { /*...*/}
</style>
//上述代码将会编译成：
  .a[data-v-f3f3eg9] .b {/*...*/}复制代码

动态生成的内容。通过v-html创建的DOM内容不受scoped样式影响，但仍然可以使用深度样式选择器(>>>)为他们设置样式

2. CSS Modules:

是模拟scoped CSS 的替代方案，模块化和组合CSS的系统

如何在整个项目应用中使用

//首先1：CSS Modules必须通过css-loader传入module：true来开启
{
  module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

// 然后2：在组件内的<style>上添加上module特性：
<style module>
  .red{color:red}
  .bold{font-weight:bold}
</style>

//然后3：在<template>模板中通过动态类绑定来使用它($style是个计算属性)
<template>
   <p :class="$style.red">
        This should be red
   </p>
</template>

// 最后4：在js中访问这个this.$style
<script>
export default{
    created(){
        console.log(this.$style.red)
    }
}
</script>复制代码

如何在单个.vue组件中使用（如下配置好之后，在需要的vue组件<style>中添加了module的就使用CSS Modules规则，剩下的匹配普通的）

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  oneOf: [
    // 这里匹配 `<style module>`
    {
      resourceQuery: /module/,
      use: [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,  //开启CSS Modules
            localIdentName: '[local]_[hash:base64:5]' //自定义生成的类名
          }
        }
      ]
    },
    // 这里匹配普通的 `<style>` 或 `<style scoped>`
    {
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}复制代码

可以和预处理配合使用

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}复制代码

在.vue组件中可以有多个<style>，为了避免被覆盖，你可以使用module属性来为他们定义注入后计算属性的名称
```
<style module="a">
  /* 注入标识符 a */
</style>

<style module="b">
  /* 注入标识符 b */
</style>复制代码
```

3.热重载：启用热重载后，当你修改.vue文件时，该组件的所有实例将在不刷新页面的情况下被替换。

状态保留规则

当编译一个组件的<template>时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能做到这一点是因为模板被编译成了新的无副作用的渲染函数。
当编译一个组件的<script>时，这个组件实例将就地销毁并重新创建。（应用中其他组件的状态将会被保留）是因为<script>可能包含有副作用的生命周期钩子，所以将重新渲染替换成重新加载是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面都会被重新加载。
<style>会通过vue-style-loader自行热加载，所以它不会影响组件的状态

用法

当使用脚手架时，热重载是开箱即用的
当你手动设置你的程序时，热重载会在你启动webpack-dev-server --hot服务时自动开启
更复杂的可以查看 github.com/vuejs/vue-h…

关闭热重载（热重载是默认开启的，除非遇到以下情况）

webpack的target是node（服务端渲染）
webpack会压缩代码
process.env.NODE_ENV === 'production'

通过hotReload:false属性来显示的关闭热重载

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        hotReload: false // 关闭热重载
      }
    }
  ]
}复制代码