webpack第三方loader的安装与配置

为什么需要第三方loader

因为webpack只能打包后缀名为js的文件，而后缀名为.css,.vue之类的就无法打包，所以需要第三方

第三方loader的安装与配置

所需安装工具
css 安装：npm i style-loader css-loader --D
less 安装：npm i less-loader less -D
scss 安装：cnpm i node-sass sass-loader -D
url 安装：npm install file-loader url-loader -D
vue 安装：cnpm i vue-loader vue-template-compiler -D
配置文件

module: { //使用loader加载器配置
        rules: [ //匹配规则
                 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理css
                 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理less
                 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //处理sass
                 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader'] }, //处理图片
                 { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] }, //处理字体文件
                 { test: /\.vue$/, use: ['vue-loader'] }, //处理vue
                ]
         }

注意事项
.vue的可能会报错，需要导入一个vue-loader/lib/plugin

在webpack.config.js中写入

const VueLoaderPkugin = require('vue-loader/lib/plugin')

在webpack.config.js的plugins中写入

 new VueLoaderPkugin()