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目录: