webpack——加载css、图片和字体(三)

我们尝试整合一些其他资源,比如图像,看看 webpack 如何处理。

1.加载css
为了从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loader 和 css-loader:

npm install --save-dev style-loader css-loader

webpack.config.js
添加规则

const path = require('path')
module.exports = {
    //默认是 production,打包出来文件会被压缩,设置为development代码就不会被压缩
    mode: 'development',  //不设置会报警告
    entry: {
        main: './src/index.js', //入口文件
    },
    output: {
        filename: 'bundle.js', //打包文件
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,以 .css 结尾的全部文件,都将被提供给 style-loader 和 css-loader。

在项目中添加一个新的 style.css 文件,并将其导入到我们的 index.js 中:
在这里插入图片描述
src/style.css

.hello {
    color: purple;
}

src/index.js

import Header from './header'
import Content from './content'
import Sidebar from './sidebar'
//引入样式文件
import './style.css'

new Header()
new Content()
new Sidebar()

var div = document.createElement("div")
div.innerHTML = "紫色"
div.classList.add('hello')

var dom = document.getElementById("root")
dom.appendChild(div)

现在运行构建命令:

npm run bundle

或者

npx webpack

再次在浏览器中打开 index.html,你应该看到紫色现在的样式是紫色。要查看 webpack 做了什么,请检查页面(不要查看页面源代码,因为它不会显示结果),并查看页面的 head 标签。它应该包含我们在 index.js 中导入的 style 块元素。
在这里插入图片描述
补充:
在这里插入图片描述
存在执行顺序:从下到上,从右到左。

2.加载图片
假想,现在我们正在下载 CSS,但是我们的背景和图标这些图片,要如何处理呢?使用 file-loader,我们可以轻松地将这些内容混合到 CSS 中:

npm install --save-dev file-loader

webpack.config.js
添加图片规则

const path = require('path')
module.exports = {
    //默认是 production,打包出来文件会被压缩,设置为development代码就不会被压缩
    mode: 'development',  //不设置会报警告
    entry: {
        main: './src/index.js', //入口文件
    },
    output: {
        filename: 'bundle.js', //打包文件
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ]
            }
        ]
    }
}

我们向项目添加一个图像,即在src目录下新建一张图片如1.jpg,然后看它是如何工作的,:
1.引入图片
2.将图像添加到我们现有的div
src/index.js

import Header from './header'
import Content from './content'
import Sidebar from './sidebar'
//引入样式文件
import './style.css'
//引入图片
import pic from './1.jpg'

new Header()
new Content()
new Sidebar()

//将新建的div添加到现有的div,并为它增添样式
var div = document.createElement("div")
div.innerHTML = "紫色"
div.classList.add('hello')

var dom = document.getElementById("root")
dom.appendChild(div)

//将图像添加到我们现有的div
var mypic = new Image()
mypic.src = pic
dom.appendChild(mypic)

我们重新构建,运行npx webpack并再次打开 index.html 文件。(每次运行npx webpack要先删除dist文件夹)
打开的页面如下,说明成功添加了图片
在这里插入图片描述
并且在dist目录下,
在这里插入图片描述

上述处理图片使用的是file-loader插件,还有url-loader插件
同样先安装:

npm install url-loader --save-dev

webpack.config.js

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        'url-loader'
    ]
}

运行: npx webpack,同样生成dist目录,但是没有图片
在这里插入图片描述
区别: url-loader是把图片转化成base64的字符串,放到bundle文件里。

另外,在添加图片规则的时候还可以配置一些参数:

{
                test:/\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',   //这里图片名字应该为1.jpg
                        outputPath: 'images/',  //将生成的图片放到images文件夹下
                        limit: 2048             //图片小于2048就打包到bundle,大于就生成图片到dist目录下
                    }
                },
            },

再次运行npx webpack,生成dist目录如下:
在这里插入图片描述

3.加载字体
下载字体:
到iconfont官网下载字体: https://www.iconfont.cn
图标管理/添加项目,点击新建项目,再选择想要的字体添加至项目中,点击下载
将下载好的包含.eot .svg .ttf .woff的文件还有iconfont.css文件添加至项目中:
在这里插入图片描述
同时修改iconfont.css中的路径:
在这里插入图片描述

像字体这样的其他资源如何处理呢?file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。这就是说,我们可以将它们用于任何类型的文件,包括字体。让我们更新 webpack.config.js 来处理字体文件:
webpack.config.js

{
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }

src/index.js(稍微做了下调整)

import Header from './header'
import Content from './content'
import Sidebar from './sidebar'
//引入样式文件
import './style.css'
//引入图片
import pic from './1.jpg'
//引入字体样式
import './iconfont.css'

new Header()
new Content()
new Sidebar()

var dom = document.getElementById("root")

//将新建的div添加到现有的div,并为它增添样式
var div1 = document.createElement("div")
div1.innerHTML = "紫色"
div1.classList.add('hello')
dom.appendChild(div1)

//将图像添加到我们现有的div
var mypic = new Image()
mypic.src = pic
dom.appendChild(mypic)

//将字体添加到我们现有的div
var div2 = document.createElement("div")
div2.innerHTML = '<div class="iconfont iconaixin"></div><div class="iconfont iconDyanjing"></div>'
dom.appendChild(div2)

我们重新构建来看看 webpack 是否处理了我们的字体:npx webpack,
页面效果如下:
在这里插入图片描述
耶,到这里成功添加字体~
再看看此时的dist目录:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读