react打包后图片丢失_webpack实战第二篇（搭建react开发环境）

最新推荐文章于 2022-04-04 23:46:46 发布
最新推荐文章于 2022-04-04 23:46:46 发布
阅读量125 收藏
点赞数
文章标签： react打包后图片丢失 vue jsx webpack报错

10b07e22ff7bf06b0166b563189a9331.png

第一篇基础部分可以参考上一篇文章

林海：webpack实战第一篇（基础部分）​zhuanlan.zhihu.com
fb9e0b009912767a50be8ea9dd3c5913.png

第一篇已经教会我们搭建了webpack的基础环境，这一篇我们来搭建一个基于react的项目

1.1 搭建react开发环境

react相关库

npm i react react-dom

解析react的库

 npm i -D @babel/preset-react

此时，我们的webpack把js的配置改为jsx的

 {
   test: /(.jsx|.js)/,
   use:{
   loader:'babel-loader',
   options:{
   presets:['@babel/preset-env','@babel/preset-react']
            }
          },
   exclude:/node_modules/
 },

1.2 配置webpack-dev-server进行热更新

npm i -D webpack-dev-server

配置如下

const Webpack = require('webpack')
module.exports = {
  // ...省略其他配置
  devServer:{
    port:3000,
    hot:true,
    contentBase:'../dist'
  },
  plugins:[
    new Webpack.HotModuleReplacementPlugin()
  ]
}

完整配置如下

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Webpack = require('webpack')
module.exports = {
 mode:'development', // 开发模式
 entry: ["@babel/polyfill",path.resolve(__dirname,'../src/index.jsx')], 
 output: {
 filename: '[name].[hash:8].js',      // 打包后的文件名称
 path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
 devServer:{
 port:3000,
 hot:true,
 contentBase:'../dist'
    },
 resolve:{
 alias:{
 'react':'react',
 '@':path.resolve(__dirname,'../src')
      },
 extensions:['*','.js','.json','.jsx']
    },
 module:{
 rules:[
          {
 test:/.css$/,
 use:['style-loader',MiniCssExtractPlugin.loader,'css-loader'] // 从右向左解析原则
          },
          {
 test:/.less$/,
 use:['style-loader',MiniCssExtractPlugin.loader,'css-loader',{
 loader:'postcss-loader',
 options:{
 plugins:[require('autoprefixer')]
                }
            },'less-loader'] // 从右向左解析原则
        },
        {
 test: /.(jpe?g|png|gif)$/i, //图片文件
 use: [
            {
 loader: 'url-loader',
 options: {
 limit: 10240,
 fallback: {
 loader: 'file-loader',
 options: {
 name: 'img/[name].[hash:8].[ext]'
                  }
                }
              }
            }
          ]
        },
        {
 test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/, //媒体文件
 use: [
            {
 loader: 'url-loader',
 options: {
 limit: 10240,
 fallback: {
 loader: 'file-loader',
 options: {
 name: 'media/[name].[hash:8].[ext]'
                  }
                }
              }
            }
          ]
        },
        {
 test: /.(woff2?|eot|ttf|otf)(?.*)?$/i, // 字体
 use: [
            {
 loader: 'url-loader',
 options: {
 limit: 10240,
 fallback: {
 loader: 'file-loader',
 options: {
 name: 'fonts/[name].[hash:8].[ext]'
                  }
                }
              }
            }
          ]
        },
        {
 test: /(.jsx|.js)/,
 use:{
 loader:'babel-loader',
 options:{
 presets:['@babel/preset-env','@babel/preset-react']
            }
          },
 exclude:/node_modules/
        },
        ]
      },
 plugins:[
 new HtmlWebpackPlugin({
 template:path.resolve(__dirname,'../public/index.html')
        }),
 new CleanWebpackPlugin(),
 new MiniCssExtractPlugin({
 filename: "[name].[hash].css",
 chunkFilename: "[id].css",
        }),
 new Webpack.HotModuleReplacementPlugin()
    ],
}

1.3 配置dev命令

  "scripts": {
    "build": "webpack --config build/webpack.config.js",
    "dev": "webpack-dev-server --config build/webpack.config.js --open"
  },

index.html加入一个根节点

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id="react-root"></div>
</body>
</html>

index.jsx

import "./assets/index.css"
import "./assets/index.less"
import React from "react"
import * as ReactDom from "react-dom"

ReactDom.render(
 <div>渲染成功</div>, window.document.getElementById("react-root"),
  );

运行npm run dev

5f4acf93cdbf363b67a68c6c9947b024.png

执行npm run dev这时候如果浏览器出现Vue开发环境运行成功，那么恭喜你，已经成功迈出了第一步

1.4 区分开发环境与生产环境

实际应用到项目中，我们需要区分开发环境与生产环境，我们在原来webpack.config.js的基础上再新增两个文件

  • webpack.dev.js 开发环境配置文件
开发环境主要实现的是热更新,不要压缩代码，完整的sourceMap

webpack.prod.js生产环境配置文件

生产环境主要实现的是压缩代码、提取css文件、合理的sourceMap、分割代码 需要安装以下模块: npm i -D webpack-merge copy-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
  • webpack-merge 合并配置
  • copy-webpack-plugin 拷贝静态资源
  • optimize-css-assets-webpack-plugin 压缩css
  • uglifyjs-webpack-plugin 压缩js
webpack mode设置production的时候会自动压缩js代码。原则上不需要引入uglifyjs-webpack-plugin进行重复工作。但是optimize-css-assets-webpack-plugin压缩css的同时会破坏原有的js压缩，所以这里我们引入uglifyjs进行压缩

这个时候在控制台我们就可以看到我们的react代码了，并且进行调试

48209ef6e9013b3bcf77936f076b6a4d.png

完整配置如下

00969dc33a1074f2493f68c9570499fb.png 
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Webpack = require('webpack')
module.exports = {
    mode:'development', // 开发模式
    entry: ["@babel/polyfill",path.resolve(__dirname,'../src/index.jsx')], 
    output: {
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
    resolve:{
      alias:{
        'react':'react',
        '@':path.resolve(__dirname,'../src')
      },
      extensions:['*','.js','.json','.jsx']
    },
    module:{
        rules:[
          {
            test:/.css$/,
            use:['style-loader',MiniCssExtractPlugin.loader,'css-loader'] // 从右向左解析原则
          },
          {
            test:/.less$/,
            use:['style-loader',MiniCssExtractPlugin.loader,'css-loader',{
                loader:'postcss-loader',
                options:{
                    plugins:[require('autoprefixer')]
                }
            },'less-loader'] // 从右向左解析原则
        },
        {
          test: /.(jpe?g|png|gif)$/i, //图片文件
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10240,
                fallback: {
                  loader: 'file-loader',
                  options: {
                      name: 'img/[name].[hash:8].[ext]'
                  }
                }
              }
            }
          ]
        },
        {
          test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/, //媒体文件
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10240,
                fallback: {
                  loader: 'file-loader',
                  options: {
                    name: 'media/[name].[hash:8].[ext]'
                  }
                }
              }
            }
          ]
        },
        {
          test: /.(woff2?|eot|ttf|otf)(?.*)?$/i, // 字体
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10240,
                fallback: {
                  loader: 'file-loader',
                  options: {
                    name: 'fonts/[name].[hash:8].[ext]'
                  }
                }
              }
            }
          ]
        },
        {
          test: /(.jsx|.js)/,
          use:{
            loader:'babel-loader',
            options:{
              presets:['@babel/preset-env','@babel/preset-react']
            }
          },
          exclude:/node_modules/
        },
        ]
      },
    plugins:[
        new HtmlWebpackPlugin({
          template:path.resolve(__dirname,'../public/index.html')
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
          filename: "[name].[hash].css",
          chunkFilename: "[id].css",
        }),
    ],
}

webpack.dev.js

const Webpack = require('webpack')
const webpackConfig = require('./webpack.config.js')
const WebpackMerge = require('webpack-merge')
module.exports = WebpackMerge(webpackConfig,{
 mode:'development',
 devtool:'cheap-module-eval-source-map',
 devServer:{
 port:3000,
 hot:true,
 contentBase:'../dist'
  },
 plugins:[
 new Webpack.HotModuleReplacementPlugin()
  ]
})

webpack.prod.js

const path = require('path')
const webpackConfig = require('./webpack.config.js')
const WebpackMerge = require('webpack-merge')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = WebpackMerge(webpackConfig,{
 mode:'production',
 devtool:'cheap-module-source-map',
 plugins:[
 new CopyWebpackPlugin([{
 from:path.resolve(__dirname,'../public'),
 to:path.resolve(__dirname,'../dist')
    }]),
  ],
 optimization:{
 minimizer:[
 new UglifyJsPlugin({//压缩js
 cache:true,
 parallel:true,
 sourceMap:true
    }),
 new OptimizeCssAssetsPlugin({})
    ],
 splitChunks:{
 chunks:'all',
 cacheGroups:{
 libs: {
 name: "chunk-libs",
 test: /[/]node_modules[/]/,
 priority: 10,
 chunks: "initial" // 只打包初始时依赖的第三方
        }
      }
    }
  }
})

好了，第二篇搭建我们自己的开发环境就结束了，之后第三篇会讲解如何优化我们的webpack

下面是我的webpack第三篇文章，优化我们的webpack

林海：webpack实战第三篇（优化webpack）​zhuanlan.zhihu.com
fb9e0b009912767a50be8ea9dd3c5913.png
weixin_40008969
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解使用WebPack搭建React开发环境
01-19
第一步、基础环境 初始化 项目初始化 npm init -y 安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架 入口文件(src/index.js) import React from 'react' import {render} from '...
使用webpack搭建react开发环境的方法
08-27
本篇文章主要介绍了使用webpack搭建react开发环境的方法，在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。一起跟随小编过来看看吧
react打包后图片丢失_从零配置webpack 4+react脚手架（四）
weixin_39628498的博客
11-19 557
从零配置webpack 4+react脚手架（四）前言经过前三节的学习，我们已经大概能自己配出一个react脚手架了，但是仍有许多配置未完成，比如图片，字体图标的配置，Source Map的配置等，通过前面的学习，我相信你已经能够做到这些简单的配置了，实在还不是很清楚，那我们就往下看吧！添加图片的loaderfile-loader 可以对图片文件进行打包，但是 url-loader 可以实现 fi...
react 开发移动端h5项目 图片打包不显示 可以这样处理（转换图片为base64）
hzxOnlineOk的博客
05-23 962
项目做好了，准备打包构建，发现本地引用的图片资源，在打包后未能生成，导致部署后，图片未能显示出来 方法就是，将图片转换成base64编码 我们只需要到http://tool.chinaz.com/tools/imgtobase这个站点，上传我们需要转换成base64的图片，将图片转成base64，替换img标签的src属性值为base64即可，这样子打包就能将正确的图片引用打包进去 ...
React项目本地环境正常显示，打包部署服务器图片不显示问题
objctly的博客
04-04 5794
React项目部署服务器，图片不显示
React元素设置背景图片,打包后,背景图不显示了,小bug修复日记
Afterwards_的专栏
09-15 1409
一个背景图元素的css是这样写的:(连接只是示意,真实图片地址是有效存在的,不是图片路径问题) .back { background: url('https:www.xxx.com/xxx.jpg') no-repeat center center fixed; opacity: 18%; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } y
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3193
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
从零开始搭建webpack+react开发环境的详细步骤
08-27
从零开始搭建webpack+react开发环境的详细步骤 本资源主要介绍了从零开始搭建webpack+react开发环境的详细步骤，涵盖了webpack的安装、配置、loader的使用、插件的配置等内容。 一、环境依赖 在开始搭建webpack+...
React_Redux_Flux_webpack_Babel
09-25
React全栈：Redux+Flux+webpack+Babel整合开发》从现代前端开发的标准、趋势和常用工具入手，由此引出了优秀的构建工具 webpack 和 JavaScript库 React，之后用一系列的实例来阐述两者的特色、概念和基本使用方法。...
React项目打包后运行报错，图片加载不出来的问题
yokimiya
07-17 4173
React项目打包后在浏览器进行运行时出现404之类找不到图片的错误，图片加载不出来的问题一般都是由于路径设置不准确导致的。 1.首先你需要修改一行代码 进到你的react目录下 > node_modules > react-scripts > config > paths.js function getServedPath(appPackageJson) { var ...
react打包后图片和资源路径错误的解决方法
well2049的博客
12-14 9634
执行打包程序后yarn run build 会看到多了一个build的文件夹。只需要把build文件夹部署到服务器即可访问。如果直接打开index.html就会报错，图片和资源加载不到。 我直接把它放到IIS上，做测试后是没有问题。 当然，如果你费用在本地访问，就手动把index.html里面的引用资源理解修改一下即可。也就是把【 /static 】前面的【/】 去掉，也可以访问到页面内容。
解决react 引入本地图片不显示的问题
lx159357qqq的博客
12-07 1655
react 引入本地图片不显示的问题
解决create-react-app打包后, 本地打开页面空白的问题
qq_33715850的博客
12-29 3086
解决create-react-app打包后, 本地打开页面空白的问题
react 中引入图片不显示问题
杜杜的博客
12-17 3537
通常我们引入图片 <img src='图片路径' alt=''/> 在React 中我们使用上面的写法引入会图片加载不出来，不显示。 所以我们在react中使用以下两种方式去引入图片： 组件方式引入： import ImageOne from '图片路径'; //直接当成组件去使用 <img src={ImageOne } alt='' /> reauire 直接引入图片地址： 　<img s rc={ require('图片路径')} alt='' />
react实现异步插件_react+webpack4搭建前端项目（三）打包优化
weixin_42515339的博客
01-11 339
前言react+webpack4搭建前端项目分为三个章节。链接如下。目的是实现从零搭建一个react后台管理系统webpack配置的讲解这是第三章，webpack打包优化主要从以下几个方面进行：react路由的异步加载css处理使用mini-css-extract-plugin把css从bundle包中抽取使用optimize-css-assets-webpack-plugin压缩css代码使用p...
技本功丨create-react-app升级webpack4填坑
weixin_34279579的博客
01-10 476
都说create-react-app是业界最优秀的 React 应用开发工具之一。But，webpack4都更新到v4.20.2它居然~还没升级，简直~不能忍看到webpack这更新速度，本人慌得一批，刚好抽空搭建react-andt-mobx脚手架准备升级~So，在此分享一下升级攻略，收好不谢！01 安装npminstall-gcreate-react-app02 ...
我的React服务端渲染实践
astonishqft的博客
10-28 944
@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全...
React项目webpack build时图片超过10000B时的配置
chenqk_123的专栏
01-06 560
最近遇到了一个很二的问题，在react项目中使用图片，在本地server上运行没有问题，先看一下具体的代码。 在项目下的src中建立了一个静态资源文件assets，里面存储着图片和css文件 有了这些图片，需要在js中引入使用 引入png图片 import source from '../assets/images/source.png' 使用img <img src={...
react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
最新发布
05-22
这个错误通常发生在 React 应用程序渲染时，因为 `render` 方法没有被正确地导入或使用。常见的原因可能是以下之一： 1. 在代码中没有正确导入 `react-dom`。请确保已经在代码中导入了 `react-dom`，例如： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值