webpack学习（二）：配置加载css, 图片, 字体, 数据(JSON, XML, CSV)等资源文件

其他 2018-12-11 03:26:10 阅读次数: 0

demo地址: https://github.com/Lkkkkkkg/webpack-demo
webpack初步配置参照 https://blog.csdn.net/qq593249106/article/details/84892069

配置加载css文件

webpack 视所有文件都为模块, css , 图片, 字体, 数据等静态资源都会打包进 js 文件, 所以会需要用到 loader 文件, 接下来安装处理css的loader文件

npm install style-loader css-loader --save-dev //需要用到style-loader和css-loader, 分别有不同作用

在 webpack.config.js 引入loader:
webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                test: /\.css$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: ['style-loader', 'css-loader'] //使用的加载器名称
            }
        ]
    }
};

引入 loader 后, 就可以在你的 src/index.js 文件 impor t你想引入的 css 文件或者其他静态资源
在 src 目录文件下新建一个 style.css , 此时目录结构如下:

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件
  |- style.css //css文件
|- package.json
|- webpack.config.js //webpack配置文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo02</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

index.js

import _ from 'lodash';
import './style.css'

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
    element.classList.add('hello'); //给元素添加一个类名hello

    return element;
}

document.body.appendChild(component());

style.css

.hello {
    color: green;
}

用NPM脚本运行webpack进行打包

npm run build

打开index.html
在这里插入图片描述
webpack打包成功, css起了作用, 文字变成了绿色

配置加载图片

加载图片需要用到另外一个 loader : file-loader

npm install --save-dev file-loader

在 webpack.config.js 引入loader:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                test: /\.css$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: ['style-loader', 'css-loader'] //使用的加载器名称
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
};

现在, 当你 import MyImage from ‘./my-image.png’，该图像将被处理并添加到 output 目录, 并且 MyImage 变量将包含该图像在处理后的最终 url (也就是会帮你改掉对应的图片路径), 当使用 css-loader 时, 如上所示, 你的 CSS 中的 url(’./my-image.png’) 会使用类似的过程去处理, loader 会识别这是一个本地文件, 并将 ‘./my-image.png’ 路径，替换为输出目录中图像的最终路径, html-loader 以相同的方式处理 < img src="./my-image.png" / >

现在再 src 文件夹下添加一张图片picture.jpg:

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件
  |- picture.jpg //图片
  |- style.css //css文件
|- package.json
|- webpack.config.js //webpack配置文件

然后在js中把这张图片加入到html中:

import _ from 'lodash';
import './style.css'
import Picture from './picture.jpg'

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
    element.classList.add('hello'); //给元素添加一个类名hello

    var Pic = new Image(); //新建一个图片对象
    Pic.src = Picture; //图片对象的路径设为引入进来的Picture

    element.appendChild(Pic); //把图片对象插入到上面的div对象里

    return element;
}

document.body.appendChild(component());

同时在css中引用图片:

.hello {
    color: green;
    background-image: url('./picture.jpg');
}

重新构建:

npm run build

打开index.html
在这里插入图片描述
可以看到添加的img成功引用到了图片, 并且css的引用的图片背景也成功了, 而且dist目录下多了一个名为eede154574125677a58d2f6e6112e417.jpg图片, 说明图片被成功处理了

配置加载字体

前面安装的file-loader 和 url-loader 可以接收并加载任何文件, 然后将其输出到构建目录, 所以也可以将字体进行加载
在 webpack.config.js 引入loader:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                test: /\.css$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: ['style-loader', 'css-loader'] //使用的加载器名称
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }
        ]
    }
};

在 src 文件夹下放入要引用的字体文件 font.ttf :

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- font.ttf //字体文件
  |- index.js //入口文件
  |- picture.jpg //图片
  |- style.css //css文件
|- package.json
|- webpack.config.js //webpack配置文件

然后再 style.css 中使用自定义字体:

@font-face {
    font-family: 'MyFont';
    src:  url('./font.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.hello {
    color: green;
    font-family: MyFont;
    font-size: 100px;
    background-image: url('./picture.jpg');
}

输入 npm run build 重新构建, 打开index.html:
在这里插入图片描述
同时dist目录下多了一个名为 7823980a3d6d6d2b65f735d445c8a4bd.ttf 的文件, 说明字体文件也被处理过了, 成功加载了字体

配置加载资源文件(JSON, XML, CSV)

类似于 NodeJS, JSON 支持实际上是内置的, 也就是说 import Data from ‘./data.json’ 默认将正常运行, 要导入 CSV、TSV 和 XML, 需要用到 csv-loader 和 xml-loader:

npm install csv-loader xml-loader --save-dev

引入loader:
webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                test: /\.css$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: ['style-loader', 'css-loader'] //使用的加载器名称
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            {
                test: /\.(csv|tsv)$/,
                use: ['csv-loader']
            },
            {
                test: /\.xml$/,
                use: ['xml-loader']
            }

        ]
    }
};

在 src 文件夹下加入 data.xml 数据文件:

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- data.xml //数据文件
  |- font.ttf //字体文件
  |- index.js //入口文件
  |- picture.jpg //图片
  |- style.css //css文件
|- package.json
|- webpack.config.js //webpack配置文件

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
    <to>Mary</to>
    <from>John</from>
    <heading>Reminder</heading>
    <body>Call Cindy on Tuesday</body>
</note>

修改一下 index.js , 引用一下 data.xml 里面的数据:

import _ from 'lodash';
import './style.css'
import Picture from './picture.jpg'
import Data from './data.xml';

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
    element.classList.add('hello'); //给元素添加一个类名hello

    var Pic = new Image(); //新建一个图片对象
    Pic.src = Picture; //图片对象的路径设为引入进来的Picture

    element.appendChild(Pic); //把图片对象插入到上面的div对象里

    console.log(Data); //输出数据

    return element;
}

document.body.appendChild(component());

输入npm run build 重新构建, 打开index.html:

在这里插入图片描述
按F12, 在控制台里看到输出了xml文件的数据, 成功加载xml数据

猜你喜欢

转载自blog.csdn.net/qq593249106/article/details/84894989
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
VS2017编译opensmile具体过程和遇到的问题
PowerEnglish——mini-story3总结
微信小程序 数据库获取字符串 在view中显示换行
Java静态代码块/构造代码块/构造函数/静态变量/成员变量(相关示例)
Keras使用tensorflowjs部署demo
window下用git连接Github
图象的全变分和去噪
LeetCode刷题笔记--119. Pascal's Triangle II
【Linux】进程间通信 - 管道
polyA|ribo-minus|differentiated cell|Genetic heterogeneity
每日归档
更多
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)
2024-04-08(60)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022