webpack-demo004，安装babel-loader，css-loader，style-loader，sass-loader，url-loader

babel-loader

此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件。

npm i -D babel-loader @babel/core @babel/preset-env

webpack.config.js

module.exports = {
    // 入口文件 默认值是 ./src/index.js
    entry: "./src/index.js",
    // 打包后的出口文件 默认值是 ./dist/main.js
    output: {
        // 输出的文件名称
        filename: 'main.js',
    },
    // 使用开发模式打包 development, production 或 none
    mode: "development",
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

css-loader、style-loader

npm i -D css-loader style-loader

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

less less-loader

$ npm i -D less less-loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            }
        ]
    }
}

sass sass-loader

npm i -D sass sass-loader

module.exports = {
    module: {
        rules: [
           {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            }
        ]
    }
}

url-loader

url-loader 会将引入的文件进行编码，生成 DataURL，相当于把文件翻译成了一串字符串，再把这个字符串打包到 JavaScript。

import logo from '../assets/image/logo.png';
console.log('logo的值: ', logo); // 打印一下看看： logo 是 base64编码

npm i -D url-loader

module.exports = {
    module: {
        rules: [
           {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {},
                    },
                ],
            }
        ]
    }
}

file-loader

file-loader 就是在 JavaScript 代码里 import/require 一个文件时，
会将该文件生成到输出目录，并且在 JavaScript 代码里返回该文件的地址。

import logo from '../assets/image/logo.png';
console.log('logo的值: ', logo); // logo的值:  dab1fd6b179f2dd87254d6e0f9f8efab.png

npm i -D file-loader

module.exports = {
    module: {
        rules: [
           {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {},
                    },
                ],
            }
        ]
    }
}