使用webpack 搭建React 项目（二）- 引入样式和图片

前文回顾

前一篇文章搭建了1个简单的react应用，本篇主要介绍在react中引入样式和图片，需要增加哪些配置

 

添加引用

# 图片（如果在img src中使用图片，必须加上file-loader）

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

# 样式

npm install --save-dev css-loader

# 压缩样式，并且将样式文件提取到单独文件中

npm install --save-dev mini-css-extract-plugin 

 

添加文件

index.js 

里面含有3种使用图片的方式

1.通过设定classname，在css文件中设定背景图片

2.内嵌样式中使用背景图片

3.img src中使用背景图片

import React from 'react';
import { render } from 'react-dom';

import './styles/style.css'
import img from './styles/images/bg_h5.jpg'


let divStyle = {
  width: '200px',
  height: '30px',
  backgroundImage: 'url(' +img + ')'

}

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <div className="bg">使用css方式</div>
        <div style={divStyle}>内嵌样式</div>
        <img src = {img} />
      </div>
    );
  }
}

render(<HelloWorld />, document.getElementById("root"));

 

style.css

.bg {
  color: green;
  background: url('./images/bg.png')
}

 

webpack.config.js 添加css和图片的loader

注：红色是新增部分

var path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWepackPlugin = require('html-webpack-plugin')

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.resolve(__dirname, 'app/index.js'), //入口文件
  output: {
    path: path.resolve(__dirname, 'build'),       //输出文件夹
    filename: 'bundle.js'　　　　　　　　　　　　　 //输入文件名
  },
  mode: 'development',　　　　　　　　　　　　　　　 //none, development 或 production（默认）
  module: {
    rules: [
      {
        test: /\.jsx?$/,                          //使用babel-loader解析js文件和jsx文件
        exclude: /node_modules/,
        loader: 'babel-loader'
      }, {
        test: /.css$/,                            // 解析css文件的后缀
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: '../'
            }
          },
          "css-loader"
        ]
      }, {
        test: /\.(gif|jpg|png|jpeg)$/,           // 解析图片
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 3400,
              name: '[name].[ext]'
            }
          }],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({ cleanAfterEveryBuildPatterns: ["./build"] }),                     // 清除文件
    new HtmlWepackPlugin({
      template: path.resolve(__dirname, './public/index.html'),  // 固定配置
      filename: 'index.html'                    // 生成对应的文件名
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].[hash].css",
      chunkFilename: "css/[name].[hash].css"
    })
  ],
  devtool: 'eval-source-map',
  devServer: {
    progress: true,                               //显示进度条
    // quiet: true,                               // 把替换输出给清除掉。
    overlay: {
      errors: true,
      warnings: true
    },
    contentBase: path.join(__dirname, './build'),
    host: 'localhost',                            //域名
    port: '8092',                                 //端口
    hot: true,                                    //热更新
    open: true
  },
}