webpack加载器

webpack默认只能打包js文件，对于非js文件只能调用loader加载器才能打包，否则就会出错

loader加载器：

1. less-loader：打包处理.less相关 sass
2. loader：打包处理.sass相关
3. url-loader：打包处理css中与url路径相关的文件

打包.css文件

1. 安装加载器

npm i style-loader css-loader -D

2.修改webpack.config.js中的module->rules数组

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

其中，test表示匹配文件类型，
use表示调用加载器

less文件

less加载器需要css加载器，所以使用less加载器之前需要安装css 加载器

npm i less-loader less -D

修改

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

scss文件

1. npm i sass-loader node-sass -D
2. 修改rules

 module.exports = {
    mode: "development",
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
        ]
    }
}

同样sass也需要css加载器
注意： 文件名后主是是 scss，加载器是sass-loader

打包样式表中的图片和字体文件：

1. npm i url-loader file-loader -D
2. webpack.config.js添加：

            {
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
                use: 'url-loader?limit-16940'
            }

其中，？之后的是loader的参数项
limit用来指定图片的大小，单位是字节，只有小于limit大小的，才会被转为
base64图片

webpack高级语法

babel转换器相关的包：

npm i babel-loader @babel/core @babel/runtime -D

babel语法插件：

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties-D

在项目根目录，创建babel配置文件babel.config.js：

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
};

在webpack.config.js 的module->rules数组中，添加loader:

 {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

exclude为排除项目，表示babel-loader不需要处理node_modules中的js文件

配置Vue加载器

npm i vue-loader vue-template-compiler -D

修改rules:

 {test: /\.vue$/, loader: 'vue-loader'}