webpack处理第三方文件的配置

1.webpack处理第三方文件的过程

当发现不是js文件，会先去配置文件找有没有对应的第三方loader规则
如果找到对应的规则就会调用相应的loader处理这种文件，如果没有，就会报错
调用loader的顺序是从后往前
当最后一个loader处理完毕后，会将结果直接交给webpack进行打包

2.处理css的第三方loader

1. 导入css
   在导入页面的js文件中

import './css/index.css'

导入的样式，默认全局生效

2. 安装第三方loader加载器
   webpack不支持打包css文件，只能打包js文件

npm i style-loader css-loader -D

3.配置匹配和处理规则
打开webpack.config.js，新增一个配置节点module,增加一个rules属性（存放所有第三方文件的匹配和处理规则）

module:{
 rules:[
  {test:/\.css$/  
//匹配css结尾的文件
,use:['style-loader','css-loader']}
//处理css文件的第三方loader
 ]
}

参数：
modules：
这是将样式类名修改为一个可变的类名，每个引用都会使用不同的类名，这样就能实现模块化
css-loader后面跟modules可以启用样式模块化，详情参考在react组件中使用样式

3.处理less的第三方loader

能够处理.less文件的loader

1. 安装命令
   安装loader

npm i less-loader -D

安装less（less-loader内部依赖）

npm i less -D

2. 配置匹配和处理规则
   打开webpack.config.js，新增一个配置节点module,增加一个rules属性（存放所有第三方文件的匹配和处理规则）

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

4.处理scss的第三方loader

1. 安装scss-loader

npm i sass-loader -D（内部依赖node-sass）

cnpm i node-sass

2. 配置匹配规则

{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

5.处理.vue文件

1. 安装相应loader

cnpm i vue-loader vue-template-compiler -D

2. 新增匹配规则
   在webpack.config.js文件中

module.exports={
	module:{
        //匹配规则
        rules:[
            { test: /\.vue$/, use: "vue-loader" }
        ]
    }
}

3. 配置插件

module.exports={
	 //插件
    plugins:[
        new VueLoaderPlugin()
    ]
}