从零搭建react框架(二)

最新推荐文章于 2024-07-29 17:34:19 发布

原创最新推荐文章于 2024-07-29 17:34:19 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #react #sass #webpack

react 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用Webpack进行React项目静态资源打包配置的方法，包括图片、Sass/CSS文件的处理，以及如何实现代码热更新，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.项目静态文件打包配置

图片文件打包配置

安装依赖包

yarn add url-loader url-loader

webpack.config.js

      {
        test: /\.(png|jpg|gif|woff|svg|ttf|eot)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192,
            outputPath: './assets/img/', // 打包图片位置
            name:'[name]-[hash:5].min.[ext]'
          }
        }]
      }

针对url图片配置

在这里插入图片描述
安装依赖包

yarn add copy-webpack-plugin

webpack.config.js

  plugins: [
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'src/assets/'),
      to: path.resolve(__dirname, 'dist/assets/')
    }])
  ],

打包结果
在这里插入图片描述

sass、css文件打包配置

安装依赖包

yarn add node-sass sass-loader style-loader css-loader mini-css-extract-plugin

webpack.config.js

const MiniCssExtractPlugin  = require("mini-css-extract-plugin"); // 在生产环境将样式表抽成单独的文件，不依赖js

const devMode = process.env.NODE_ENV !== 'production';

plugins: [
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // both options are optional
    filename: devMode ? '[name].css' : '[name].[hash].css',
    chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
  })
],

{
  test: /\.scss$/,
  use: [
    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader',
  ]
},

src/app.js

import React from 'react';
import ReactDom from 'react-dom';

import './assets/style/app.scss';

ReactDom.render(
  <div>
    react is building
    <img src="./assets/img/app.jpg" alt=""/>
  </div>,
  document.querySelector("#app"));

在src/assets目录下新建img/app.jpg、style/app.scss文件，yarn start启动项目

在这里插入图片描述

2.项目热加载配置

开发人员修改了代码，经过webpack打包后，只替换修改的部分代码，做到页面的局部刷新，不会改变react其他未修改的状态和数据

安装依赖包

yarn add react-hot-loader

/src/route/index.js

import React from 'react';
import {Switch, BrowserRouter, Route} from 'react-router-dom';
import {hot} from 'react-hot-loader';
import Index from '../views/Index';
import User from '../views/User';
import Count from '../views/Count';

const BasicRoute =() => (
  <BrowserRouter>
    <Switch>
      <Route exact component={Index} path="/"/>
      <Route exact component={User} path="/user"/>
      <Route exact component={Count} path="/count"/>
    </Switch>
  </BrowserRouter>
);

export default hot(module)(BasicRoute);

至此，react框架的开发环境基本搭建完成了(*￣︶￣)。接下来需要做一些优化、拆分出生产环境需要的配置

项目github地址：https://github.com/kakaoG/react-webpack