新版 vue loader 使用注意细则

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/csdn_yudong/article/details/84900409

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 文件的一些介绍

展开阅读全文

没有更多推荐了,返回首页