13 Webpack 资源文件引入

╰+攻爆jí腚メ 2023-02-28 05:23 11阅读 0赞

## **加载 CSS** ##

如果我们要import './style.css'，需要安装 [style-loader][] 和 [css-loader][]：

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

# #

## **加载图片** ##

如果我们的css中存在背景和图标这些图片，那么我们需要安卓 [file-loader][]

npm install --save-dev file-loader

这样我们可以使用 import MyImage from './my-image.png'，url('./my-image.png')，<img src="./my-image.png" />等语法

## **加载字体** ##

那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。

# #

## **加载数据** ##

要加载如 JSON 文件，CSV、TSV 和 XML等数据。

NodeJS支持JSON的加载

CSV、TSV 和 XML，你可以使用 [csv-loader][] 和 [xml-loader][]。

npm install --save-dev csv-loader xml-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: \[

\{

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'

\+         \]

\+       \}

\]

\}

\};

## **指定资源文件输出路径** ##

\{

test: /\\.(png|svg|jpg|gif)$/,

use: \[

\{

loader: 'file-loader',

options:\{

name: '/images/\[hash\].\[ext\]'

\}

\}

\]

\},

## **示例：** ##

index.html

<div class="webpack"></div>

index.css

.webpack \{

background: url(../img/webpack.png) no-repeat center;

height:500px;

\}

index.js 引入css

require('../css/index.css');

执行webpack指令

查看生成的目录结构

[style-loader]: https://www.webpackjs.com/loaders/style-loader
[css-loader]: https://www.webpackjs.com/loaders/css-loader
[file-loader]: https://www.webpackjs.com/loaders/file-loader
[csv-loader]: https://github.com/theplatapi/csv-loader
[xml-loader]: https://github.com/gisikw/xml-loader

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack-02htm文件和资源文件处理

webpack—结构文件的配置一，配置HTML 1，下载 npm i html-webpack-plugin -D 2，引入 ![在这里插入图片描

我就是我/ 2023年07月24日 13:21/ 0 赞/ 7 阅读

相关通过媒体查询引入不同的资源文件

假设body里面有两个div，当屏幕宽度>640px的时候，让屏幕一行显示两个div，当屏幕宽度>320px的时候，让屏幕一行显示一个div <body>

亦凉/ 2023年07月03日 06:25/ 0 赞/ 22 阅读

相关 webpack的资源打包(html中引入的资源和css中引入的资源)配置使用问题

最近在做一个webpack小项目的文件打包情况碰见的问题如下： 1、html中的img的src引入为\[‘object, module’\]的情况 2、对于cs

今天药忘吃喽~/ 2023年06月18日 05:52/ 0 赞/ 22 阅读

相关 13 Webpack 资源文件引入

加载 CSS 如果我们要import './style.css'，需要安装 [style-loader][] 和 [css-loader][]： npm install

╰+攻爆jí腚メ/ 2023年02月28日 05:23/ 0 赞/ 12 阅读

相关普通html文件引入es6解析（非webpack）

1，[https://www.cnblogs.com/kiancyc/p/12922564.html][https_www.cnblogs.com_kiancyc_p_1292

拼搏现实的明天。/ 2023年02月12日 09:24/ 0 赞/ 19 阅读

相关 vue引入bootstrap——webpack

vue引入bootstrap——webpack 想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstr

柔光的暖阳◎/ 2022年06月09日 05:39/ 0 赞/ 374 阅读

相关利用webpack打包其它资源文件

文章目录打包sass文件项目结构修改源码运行结果打包less文件修改源码运行结

r囧r小猫/ 2022年04月18日 06:31/ 0 赞/ 304 阅读

相关 webpack全面引入jQuery

方法一：使用expose-loader 链接地址 //首先安装expose-loader npm install expose-loader --sav

忘是亡心i/ 2021年12月11日 03:09/ 0 赞/ 429 阅读

相关 webpack4 资源文件内联

减少请求和避免闪动 js和html内联:一般用于移动端引入在html中进行内联: (1)下载 cnpm inst

雨点打透心脏的1/2处/ 2021年07月24日 17:02/ 0 赞/ 477 阅读

相关 webpack4 通过cdn引入外部资源打包

方式一: 1、与mode同级配置,则不会打包jquery externals: { jquery:'jQuery',

左手的ㄟ右手/ 2021年07月24日 12:19/ 0 赞/ 699 阅读