(webpack篇)2.webpack中loader

概念：loader是一种打包方案，用来处理多种文件格式机制，如css代码，图片，模板代码等

一、案例使用之`file-loader`

1.安装 npm install file-loader -D
2.配置 webpack.config.js中

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.jpg$/,
            use: {
                loader: 'file-loader'
            }
        }]
    },
    ...
}
复制代码

3.项目src文件夹下添加avatar.jpg图片

4.代码src/index.js中引入图片

import avatar from './avatar.jpg';
var img = new Image();
img.src = avatar;
var root = document.getElementById('root');
root.appendChild(img);
复制代码

5.执行打包命令&打包效果

命令 npm run build

6.file-loader配置介绍

1).设置多种文件格式 PS：支持多种文件格式

module: {
    rules: [{
        test: /\.(png|jpe?g|gif)$/i,
        use: {
            loader: 'file-loader'
        }
    }]
},
复制代码

2).设置打包文件名&图片打包的目录

module: {
    rules: [{
        test: /\.(png|jpe?g|gif)$/i,
        use: {
            loader: 'file-loader',
            options: {
                // 占位符
                name: '[name]_[hash].[ext]',
                outputPath: 'images/' // 图片打包的目录
            }
        }
    }]
}
复制代码

3).打包结果

PS:更多配置查看：webpack.docschina.org/loaders/fil…

二、案例使用之`url-loader`

1.安装 npm install url-loader -D
2.说明：url-loader和file-loader相比多了一个limit配置项，在超过limit的时候执行和file-loader功能一样，当小于limit时会将文件打包成base64到js中
3.在webpack.config.js中

module: {
    rules: [{
        test: /\.(png|jpe?g|gif)$/i,
        use: {
            loader: 'url-loader',
            options: {
                // 占位符
                name: '[name]_[hash].[ext]',
                outputPath: 'images/', // 图片打包的目录
                limit: 204800   // 设置文件大小超过这个值的转为base64 否则打包成图片
            }
        }
    }]
}
复制代码

4.打包结果

三、案例使用之`样式静态资源打包`-css

说明：webpack打包默认只识别.js的文件，当我们遇到.css文件时，我们可以使用loader来完成

1.安装style-loader&css-loader

npm install style-loader css-loader -D

2.webpack.config.js中进行配置

const path = require('path')
module.exports = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
    ...
}
复制代码

3.在src目录下创建index.css写入样式

.avatar {
    width: 150px;
    height: 150px;
}
复制代码

4.在src/index.js中引入index.css&img标签上使用该样式

import avatar from './avatar.jpg';
import './index.css';

var img = new Image();
img.src = avatar;
img.classList.add('avatar');
var root = document.getElementById('root');
root.appendChild(img);
复制代码

5.打包之后效果展示

四、案例使用之`样式静态资源打包`-scss

1.安装sass-loader&node-sass

npm install sass-loader node-sass -D

2.修改webpack.config.js中配置css的为scss

const path = require('path')
module.exports = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }]
    }
    ...
}
复制代码

PS:将后缀改为scss&添加了sass-loader，这里只添加sass-loader

3.将src/index.js中引入css改为scss
4.将src/index.css改为src/index.scss&内容改为

body {
    .avatar {
        width: 200px;
        height: 200px;
    }
}
复制代码

5.效果图

五、`css-loader`中常用配置项

1.说明：

在webpack.config.js中配置在css-loader之前必须先使用下面的postcss-loader&sass-loader。PS:不然会出现问题，我们写的sass代码会直接用css-loader导致报错。

2.配置代码

webpack.config.js中

...
module.exports = {
	...
    module: {
        rules: [
        ...
        {
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                },
                'sass-loader',
                "postcss-loader"
            ]
        }]
    }
    ...
}
复制代码

3.模块化的css

说明：通过在css-loader下的options添加参数modules: true来进行修改。同时，引入样式也得通过import style from 'xxxx';来，使用的使用通过style.名字

a.在index.scss 中

/* 定义了样式 */
.avatar {
    width: 200px;
    height: 200px;
    transform: translate(100px, 100px);
}
复制代码

b.在index.js 中

import avatar from './avatar.jpg';
import style from './index.scss'; // 模块化的引入方式
// 导入另一个创建图片
import createAvatar from './createAvatar';
createAvatar()
// 另外创建图片
var img = new Image();
img.src = avatar;
img.classList.add(style.avatar);
var root = document.getElementById('root');
root.appendChild(img);
复制代码

c.在createAvatar.js中

// 创建对象没有引入变量
import avatar from './avatar.jpg';
function createAvatar() {
    var img = new Image();
    img.src = avatar;
    img.classList.add('avatar');
    var root = document.getElementById('root');
    root.appendChild(img);
}
export default createAvatar;
复制代码

d.重新启动项目！！！很重要！！！修改配置文件之后重启项目

e.效果展示

f.未添加样式的图片新增模块化引入在createAvatar.js中

+ import style from './index.scss';
...
- img.classList.add('avatar');
+ img.classList.add(style.avatar);
复制代码

g.最终效果展示PS：成功了！！！

4.打包字体图标

字体图标下载库地址
a.用户登录，创建项目，将内容加入项目，点击下载。
b.下载项目
c.在项目src目录下创建font文件夹
d.将下载内容相关文件复制进font文件夹下

e.src/index.js 写入新代码

import './index.scss';

var root = document.getElementById('root');
root.innerHTML = '<div class="iconfont iconmenzhentijian"></div>' // 这里后面样式是使用index.scss中的，其中iconfont是固定的
复制代码

f.src/index.scss中修改选自下载代码的iconfont.css

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1615034295683'); /* IE9 */
  src: url('iconfont.eot?t=1615034295683#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1615034295683') format('woff'),
  url('iconfont.ttf?t=1615034295683') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1615034295683#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconmenzhentijian:before {
  content: "\e603";
}

.iconbiaobenbiaobenjinyangbiaobenjianceshiguan:before {
  content: "\e604";
}

.iconbiaobenliuzhuanliuzhuanxunhuan:before {
  content: "\e605";
}
复制代码

f.这里需要主要我们使用的是非模块化打包，记得到webpack.config.js中取消模块化配置

const path = require('path')
module.exports = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                },
                'sass-loader',
                "postcss-loader"
            ]
        }]
    }
    ...
}
复制代码

g.此时的webpack打包是不支持.eot .svg .ttf .woff的
在webpack.config.js中使用file-loader

const path = require('path')

module.exports = {
    mode: 'development',   // 指定构建模式
    entry: './src/index.js',  // 指定构建入口文件
    module: {
        rules: [
        ...
        {
            test: /\.(eot|svg|ttf|woff)$/i,
            use: {
                loader: 'file-loader'
            }
        }
        ...
        ]
    }
    ...
}
复制代码

h.项目启动效果展示

PS：已经更新完结了~~~噢力给

(webpack篇)2.webpack中loader

一、案例使用之file-loader

二、案例使用之url-loader

三、案例使用之样式静态资源打包-css

四、案例使用之样式静态资源打包-scss

五、css-loader中常用配置项

一、案例使用之`file-loader`

二、案例使用之`url-loader`

三、案例使用之`样式静态资源打包`-css

四、案例使用之`样式静态资源打包`-scss

五、`css-loader`中常用配置项