file-loader

当需要引用jpg文件时，直接引用打包会报错，这时需要在配置文件里面进行配置（当引入的文件是jpg格式时使用file-loader进行打包）：

module: {
    rules: [{
        test: /\.(jpg$|png|gif)$/,    //jpg$|png|gif文件打包
        use: {
            loader: 'file-loader',
            //placeholders 占位符
            options: {
                name: '[name].[ext]',  //配置打包出的文件名与原文件名一致
                outputPath: 'images/'   //打包文件生成的位置
            }
        }
    }]
},

但是，此时我们并没有安装file-loader，在命令行中输入npm install file-loader -D进行安装

image.png

这样配置完在重新打包就会额外生成一个jpg文件，并且返回打包后的文件地址。

import test from './test.jpg';

var img = new Image();
img.src = test;

var root = document.getElementById('root');
root.append(img);

url-loader

url-loader和file-loader很类似，同样可以进行文件的打包。那么在我们进行一系列安装配置过后，发现dist目录下并没有生成图片文件，但是页面上却可以正常的显示。在浏览器上查看文件地址发现文件是一个base64的地址

image.png

module: {
    rules: [{
        test: /\.(jpg$|png|gif)$/,    //jpg$|png|gif文件打包
        use: {
            loader: 'file-loader',
            //placeholders 占位符
            options: {
                name: '[name].[ext]',  //配置打包出的文件名与原文件名一致
                outputPath: 'images/',   //打包文件生成的位置
                limit: 2048  //文件小于2kb将会打包到main.js中
            }
        }
    }]
},

scss-loader

{
    test: /\.scss$/,    //scss文件打包
    use: [
        {loader: 'style-loader'},
        {
            loader: 'css-loader',
            options: {
                importLoaders: 2,  //import 引入的scss都需要从下到上执行所有的loader
                modules: true  //开启css模块化打包，引入的css仅在当前项目有效
            }
        },
        {loader: 'sass-loader'},
        {loader: 'postcss-loader'}
    ]
}