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

最新推荐文章于 2024-05-15 01:31:37 发布

Lkkkkkkg

最新推荐文章于 2024-05-15 01:31:37 发布

阅读量995

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq593249106/article/details/84894989

版权

本文详细介绍了如何使用webpack配置加载CSS、图片、字体以及JSON、XML、CSV等资源文件。通过引入相应的loader，如css-loader、file-loader、url-loader等，实现静态资源的打包和处理。示例代码展示了具体配置过程，并验证了配置的有效性。

摘要由CSDN通过智能技术生成

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 &

最低0.47元/天解锁文章

Lkkkkkkg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack学习（二）：配置加载css, 图片, 字体, 数据(JSON, XML, CSV)等资源文件

webpack初步配置参照 https://blog.csdn.net/qq593249106/article/details/84892069demo地址: https://github.com/Lkkkkkkg/react-demo配置css文件webpack 视所有文件都为模块, css , 图片, 字体, 数据等静态资源都会打包进 js 文件, 所以会需要用到 loader 文件, ...
复制链接

扫一扫

专栏目录