webpack loader插件

webpack Vue 的loader插件

我所知道的有

css的：

 rules: [
		  {
		  	test:/\.css$/,  //css部分
		  	use:[
		  	 {loader:'style-loader'},
		  	 {loader:'css-loader'},
		  	]
		  }
    ]
//下载
cnpm i style-loader css-loader    
//或
npm i style-loader css-loader 

图片以及音频视频:

        {
			test:/\.jpg|png|gif|ttf|woff$/, 
			use:[
			//命名
			{loader:'file-loader',options:{name:'[name].[ext]'}}
			]
		}
//下载
cnpm i file-loader    
//或
npm i file-loader 

HTML的：

{
		  	test:/\.html$/, 
		  	use:[
		  	//命名
		  	 {loader:'file-loader',options:{name:'[name].html'}},
		  	 //与js分离
		  	 {loader:'extract-loader'},
		  	 //分析html
		  	 {loader:'html-loader'},
		  	]
		  	}
//安装
npm i file-loader extract-loader html-loader

vue的就比较麻烦了：

//安装
npm i vue-loader

//vue-loader的调用
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ],
  resolve: {
		        alias: {
		            'vue': 'vue/dist/vue.js'
		        }
    },
	module:{  //写loader
		rules:[
		    {
            test: /\.vue$/,
            loader: 'vue-loader'
         }
		]
	}
}