Webpack React 简单入门三 css img

最新推荐文章于 2024-06-19 16:51:53 发布

原创最新推荐文章于 2024-06-19 16:51:53 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在Webpack中配置CSS加载器，包括css-loader和style-loader的安装与使用，解决常见错误。同时，讲解图片资源加载配置，涉及file-loader、url-loader及image-webpack-loader的运用，确保资源正确引入。

render 只能有一个组件

所以嵌套的话需要用div 包裹

1 nstall the two loaders: npm install css-loader style-loader --save-dev.

继续配置 css

2 Webpack.config.js

3 在js 中引入即可

错误处理

webpack引入css报错cannot resolve module 'style'？

修改配置

loader: 'style-loader!css-loader'

==========图片==========

npm install file-loader --save-dev
npm install image-webpack-loader  --save-dev
npm install url-loader --save-dev

配置后代码

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }
        , {
            test: /\.css$/, // Only .css files
            loader: 'style-loader!css-loader' // Run both loaders
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '../img/[name].[ext]?[hash]'  //../img是文件存储位置，name是文件名
            }
        }
    ]

}

图片存放处

HTML 代码使用