webpack处理(处理css/less/scss/url(图片)/字体文件)

文章目录

处理.css文件
处理.less文件
处理.scss文件
处理URL(图片)
处理bootstrap字体图标

注意：webpack 默认只能打包处理 JS 类型的文件，无法处理其他的非 JS 类型的文件；
如果要处理非 JS 类型的文件，我们需要手动去安装一些合适的第三方 loader 加载器；
1.如果想要打包处理 css 文件，需要安装 npm i style-loader css-loader -D
2.打开webpack.config.js 这个配置文件，在里边，有一个配置节点，就是 module，它是一个对象；在这个 module 对象身上，有个 rules 属性，这个 rules 属性是个数组；这个数组中，存放了，所有第三方文件的匹配和处理规则

在 webpack.config.js 中添加module 这个节点，在其中配置。
module 用于配置所有第三方模块的加载器

在 main.js 中导入文件：

import './css/index.css'
import './css/index.less'
import './css/index.scss'

**注：.scss 文件的后缀**

处理.css文件

本地安装style-loader、css-loader

npm i style-loader -D

npm i css-loader -D

    module: { //这个节点，用于配置 所有第三方模块 加载器
        rules: [ //所有第三方 匹配规则
            {
                // 配置处理 .css 文件的 第三方 loader 规则
                test: /\.css$/,	 //表示要处理的文件类型
                use: ['style-loader', 'css-loader'] //这种文件类型用谁来处理，用use指定。
                // loader 调用会从后往前 调用
            },
        ]
    }

注：处理.css文件，需要安装配置style-loader css-loader loader规则

处理.less文件

安装 less-loader
安装 less，因为 less-loader 依赖 less

npm i less-loader -D

npm i less -D

    module: { //这个节点，用于配置 所有第三方模块 加载器
        rules: [ //所有第三方 匹配规则
            {
                // 处理.less 文件的 第三方loader，依赖 less
                // 配置处理 .less文件的第三方 loader 规则
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }

注：在配置的时候，不用配置 less ，因为less 只是一个依赖项。

处理.scss文件

安装 sass-loader
安装node-sass，必须安装，sass-loader 依赖于 node-sass，必须用 cnpm 安装

npm i sass-loader -D

cnpm i node-sass -D

    module: { //这个节点，用于配置 所有第三方模块 加载器
        rules: [ //所有第三方 匹配规则
            {
                // 配置 .sass 第三方处理 ，必须安装 node-sass，因为依赖于它
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'] //配置处理
                //  .scss 文件的 第三方 loader 规则
            }
        ]
    }

注：在配置的时候，不用配置node-sass,它也是一个依赖项

处理URL(图片)

安装 url-loader
安装 file-loader ，这个是内部依赖，配置的时候，不用配置

cnpm i url-loader file-loader -D

 {
                // 处理 图片文件
                test: /\.(jpg|gif|png|jpeg)$/,
                use: 'url-loader?limit=232041&name=[hash:8]-[name].[ext]' 
                //处理图片路径的 loader
                // limit 给定的值，是图片的大小，单位是 byte(字节),如果我们引用的 图片，大于或等于给定的
                // limit 值，则不会被转为base64格式的字符串，如果图片小于给定的 limit 值，则会被转为base64的字符串
                // name=[name].[ext] ,表示 转换过的 名字还用原来的名字，后缀还是原来的后缀
                // 方式命名一样，可以放一个hash值，最多32位，这表示取前8位。（防止命名重复）
            }

处理bootstrap字体图标

安装bootstrap
安装 url-loader

npm i bootstrap -S

npm i url-loader -D

在入口文件中引入bootstrap

 import ''bootstrap/dist/css/bootstrap.css''

注：// 注意，如果要通过路径的形式去引入 node_modules 中相关的文件，可以直接省略路径前面的node_modules 这一层目录，直接写包的名称，然后后面跟上具体的文件路径；
不写 node_modules 这层目录也行，默认就会去 node_modules 中查找

{
                // 处理 字体文件的 loader
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            }

在html中引用字体图标代码即可，例如：

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>