新版 vue 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 文件里的 <script> 块。

vue-loader v15 除了必须带有 VueLoaderPlugin 之外，还需另外单独配置 css-loader

webpack 中的 css-loader

css-loader

module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
		],
	},
};

或者

module.exports = {
	module: {
		rules: [
			{
				test:/\.css$/,
				loader:"style-loader!css-loader"
			}
		]
	}
}

【关于 css-loader 从右往左，从下往上的顺序。就不再多阐述了。】

vue 中的 vue-style-loader

但是在 vue 中，我们更推荐使用 vue-style-loader 。

module.exports = {
  module: {
    rules: [
      // ... 忽略其它规则

      // 普通的 `.scss` 文件和 `*.vue` 文件中的
      // `<style lang="scss">` 块都应用它
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 插件忽略
}

关于其他的预处理器的使用配置请看： vue loader 使用预处理器

---

下面是【源】

vue loader 文档
vue loader 配置
vue loader 使用预处理器
关于 .vue 文件的一些介绍