新版 vue loader 使用注意细则

新版 vue loader 使用注意细则

  • 基本使用规则
  • webpack 中的 css-loader
  • vue 中的 vue-style-loader

老版本指的是 V14 及之前的版本;本文基于 vue-loader 版本 v15.编写。
vue-loader 版本 v15 的升级是一次大的改动,所以这里对比之前的配置,总结几点:

基本使用规则

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件:

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

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}

这个插件是必须的! 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如,如果你有一条匹配 /\.js$/ 的规则,那么它会应用到 .vue 文件里的

你可能感兴趣的:(前端)