当前位置: 开发笔记 > 编程语言 > 正文

webpack构建react项目(一)

作者：浪漫的美食 | 来源：互联网 | 2023-07-30 12:49

前言下面是我们使用到技术栈:webpack+react+redux+react-router+react-thunk+ES6+.注意事

前言　

　　下面是我们使用到技术栈:

　　　　webpack + react + redux + react-router + react-thunk + ES6 + ....

　　注意事项：

　　　　建议使用npm5.X 或者 yarn 包管理工具(最好不要使用cnpm,虽然安装包速度上很快,但是在文件关联上会有坑,之前用的时候被坑过)

一、新建项目目录

config : webpack 配置文件

dist：打包后代码

src：源码目录

二、基础配置

安装基础的包

// 生成默认package.josn 文件
npm init

// 安装 webpack 和 webpack-dev-server
npm install webpack webpack-dev-server --save-dev

// 安装 react react-dom
npm install react react-dom --save

// 安装 babel-core 、babel-loader、babel-preset-env、babel-preset-react
npm install  babel-core babel-loader babel-preset-env babel-preset-react --save-dev

// html-webpack-plugin 生成html文件
npm install html-webpack-plugin --sav-dev

添加 webpack 配置

先添加部分基础文件：

config/webpack/file.path.js

 1 const { resolve } = require('path')
 2 
 3 // 项目根目录
 4 const projectPath = process.cwd()
 5 // 代码地址目录
 6 const srcPath = resolve(projectPath, 'src')
 7 // 入口文件目录
 8 const mainPath = resolve(srcPath, 'main')
 9 
10 // 入口文件
11 const indexJsPath = resolve(mainPath, 'index.jsx')
12 const indexHtmlPath = resolve(mainPath, 'index.html')
13 
14 module.exports = {
15     srcPath,
16     mainPath,
17     indexJsPath,
18     indexHtmlPath
19 }

config/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

const { srcPath, indexJsPath, indexHtmlPath  } = require('./file.path.js')

// 生成HTML文件
const generateIndex = new HtmlWebpackPlugin({
    inject: 'body',
    filename: 'index.html',
    template: indexHtmlPath
})

module.exports = {
    // 基础目录（绝对路径），用于从配置中解析入口点和加载程序
    // 默认使用当前目录，但建议在配置中传递一个值。这使得您的配置独立于CWD（当前工作目录）
    context: srcPath,

    // 入口文件
    entry: indexJsPath,

    // 输入配置
    output: {
    },

    // 模块配置
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: 'babel-loader'
            }
        ]
    },

    // 插件配置
    plugins: [
        generateIndex
    ]
}

添加 babel 配置 .babelrc:

.babelrc

1 {
2     "presets": [
3         "env", // babel 启动插件
4         "react" // 编译react语法插件
5     ]
6 }

添加入口文件 src/main/index.jsx:

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 
 4 const render = () => {
 5     ReactDOM.render(
 6         Hello React,
 7         document.getElementById('app-container')
 8     )
 9 }
10 
11 render()

添加 index.html

在package.json 中添加启动命令：

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

现在可以直接在cmd中运行:

npm run start

可以在浏览器打开 http://localhost:8080/ ，你可以看到一下效果：

完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons%201

三、高级配置

1. 添加 react-router

// 安装 react-router-dom
npm install react-router-dom --save

添加 src/main/app.js

 1 import React, { Component } from 'react'
 2 import { BrowserRouter, Route, Link } from 'react-router-dom'　　
 3 
 4 import Home from '../containers/Home'
 5 import About from '../containers/About'
 6 import Topics from '../containers/Topics'
 7 
 8 // BrowserRouter 下只能有一个子元素
 9 class App extends Component {
10     render() {
11         return (
12             
13                 
14                     
15                         Home
16                         About
17                         Topics
18                     
19 
20                     
21 
22                     
23                     
24                     
25                 
26             
27         )
28     }
29 }
30 
31 export default App

添加 containers/Home/index.js

 1 import React, { Component } from 'react'
 2 
 3 const Home = () => {
 4     return (
 5         
 6             Home
 7         
 8     );
 9 }
10 export default Home

添加 containers/About/index.js

1 import React from 'react'
2 
3 const About = () => (
4     
5         about
6     
7 )
8 
9 export default About

添加 containers/Topics/index.js

import React from 'react'

const Topics = () => {
    return (
        
            topics
        
    );
}
export default Topics

修改 src/main/index.jsx 文件

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 
 4 import App from './app.js'
 5 
 6 const render = CompOnent=> {
 7     ReactDOM.render(
 8         ,
 9         document.getElementById('app-container')
10     )
11 }
12 
13 render(App)

路由我们添加完了，可以运行项目，在浏览器 http://localhost:8080/ 预览效果。

react-router路由有 BrowserRouter和HashRouter 两种路由，两者的区别：

　　BrowserRouter 使用HTML5 历史API, HashRouter 使用哈希值
　　例如：如果同一个修改用户信息路由,在BroserRouter下显示 user/edit,而在HashRouter 下显示为 #/user/edit
　　刷新页面BrowserRouter会向服务端发送请求，后台要做一定处理，而HashRouter 不会向服务端发送请求

　　在react-router 4.0 的文档中有这样一段话：
　　注意：使用 hash 的方式记录导航历史不支持 location.key 和 location.state。在以前的版本中，我们为这种行为提供了 shim，但是仍有一些问题我们无法解决。任何依赖此行为的代码或插件都将无法正常使用。由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用代替。

完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons2

2.配置redux 、react-thunk

// 安装redux react-redux
npm install redux react-redux react-thunk --save

添加 src/main/store.js

 1 import { combineReducers, createStore, applyMiddleware  } from 'redux'
 2 import thunk from 'redux-thunk'
 3 
 4 import rootReducers from '../reducers'
 5 
 6 const middleware = [thunk]
 7 
 8 const store = createStore(
 9     combineReducers(rootReducers),
10     {},
11     applyMiddleware(...middleware)
12 )
13 
14 export default store

添加 src/reduxcers/index.js

1 function userInfo(state = {}) {
2     return {
3         name: 'react'
4     }
5 }
6 
7 export default {
8     userInfo
9 }

修改 src/main/app.js

 1 import { Provider } from 'react-redux'
 2 import store from './store'
 3 
 4   ...
 5 
 6     render() {
 7         return (
 8             
 9                 ...
10             
11         )
12     }
13     
14   ...

修改 src/tontainers/Home/index.js

 1 import React, { Component } from 'react'
 2 import { connect } from 'react-redux'
 3 
 4 const Home = ({ userInfo }) => {
 5     return (
 6         
 7             Home
 8             
 9                 这是redux中的数据
10                 {userInfo.name}
11             
12         
13     );
14 }
15 
16 const mapStateToProps = ({ userInfo }) => {
17     return {
18         userInfo
19     }
20 }
21 
22 const mapDispatchTopProps = {}
23 // 使用connect 关联redux
24 export default connect(mapStateToProps, mapDispatchTopProps)(Home)

redux我们添加完了，可以运行项目，在浏览器 http://localhost:8080/ 预览效果。

完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons3

3.配置 react 热加载

修改 config/webpack.config.js

 1 const webpack = require('webpack')
 2 
 3   ...
 4 
 5     // 插件配置
 6     plugins: [
 7         ...
 8         // 开启全局的模块热替换(HMR)
 9         new webpack.HotModuleReplacementPlugin(),
10         // 热加载中可以输入更加友好的模块名
11         new webpack.NamedModulesPlugin()
12     ]
13 
14   ...
15 
16     devServer: {
17         hot: true
18     }
19   ...

这样配置已经可以实现热加载了，但是并不算结束，还需要配置 react-hot-loader 的热加载插件，这是因为 webpack-dev-server只能即时的刷新页面，但是组件中的状态保存不住，因为React有一些自己的语法（jsx）是HotModuleReplacementPlugin处理不了。而react-hot-loader 在 --hot 基础上做了额外的处理,来保证状态可以存下来。

// 安装 react-hot-loader
npm install react-hot-loader --save

修改 .babelrc

{
    "presets": [
        ["env", {
            "modules": false
        }],
        "react"
    ],
    "plugins": ["react-hot-loader/babel"]
}

添加 react-hot-loader/patch 和 publicPath 到 webpack.config.js,

 1 ...
 2 
 3 module.exports = {
 4   ...
 5     // 入口文件
 6     entry: [
 7         'react-hot-loader/patch',
 8         indexJsPath
 9     ],
10 
11     // 输入配置
12     output: {
13         publicPath: '/'
14     },
15 
16   ...
17 }
18 
19  ...

修改 src/main/index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './app.js'
 
const render = CompOnent=> {
  ReactDOM.render(
    
      
    ,
    document.getElementById('root'),
  )
}
 
render(App)
 
// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => { render(App) })
}

react-hot-loader 就配置完成了，现在更改三个页面中的文件，就可以在页面中实时看到。

配置时注意事项：

必须将webpack配置中output下publicPath设置为"/",否则无法实现热加载
将.babelre 中设置babel env预设更改为不使用Babel转换成ES2015模块 [ "env": { "modules": false } ]
react-hot-loader在webpack-dev-server的热加载基础上做了额外的处理，所以必须要打开webpack-dev-server的 hot模式才可以实现热加载

react-hot-loader我们添加完了，可以运行项目，在浏览器 http://localhost:8080/ 预览效果。

完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons4

4. 配置各种资源的loader

css资源加载器

// 安装 style-loader css-loader postcss-loader
npm install style-loader css-loader postcss-loader --save-dev

下面是webpack.config.js 中的配置

 1 ...
 2 // 模块配置
 3 module: {
 4     rules: [
 5         ...
 6         {
 7             test: /\.css$/,
 8             use: [
 9                 {
10                     loader: 'style-loader'
11                 },
12                 {
13                     loader: 'css-loader',
14                     options: {
15                         importLoaders: 1
16                     }
17                 },
18                 {
19                     loader: 'postcss-loader'
20                 }
21             ]
22         }
23         ...
24     ]
25 },
26 ...

使用postcss需要添加postcss.config.js

module.exports = {
    plugins: [
        // 添加你需要的插件，这个后面会提到
    ]
}

之前一直使用sass，但是这里并没有选择sass、less等css预处理框架，个人认为postcss是一个平台，提供了丰富的插件，可以更好处理css。

图片资源的加载

// 安装 url-loader file-loader
npm install url-loader file-loader --save-dev

下面是webpack.config.js 中的配置

 1 ...
 2 // 模块配置
 3 module: {
 4     rules: [
 5         ...
 6         {
 7             test: /\.(png|jpg|gif)$/,
 8             use: [
 9                 {
10                     loader: 'url-loader',
11                     options: {
12                         limit: 8192
13                     }
14                 }
15             ]
16         },
17         ...
18     ]
19 },
20 ...

url-loader: 可以将图片小于8192(根据limit设置而定)的图片装成base64和源码添加在一起，减少请求，提高加载速度。

file-loader: 对url-loader无法处理的图片资源(大于limit设置的值),使用此loader进行处理，当然这个loader还可以加载字体图标等文件，这里就不在详细添加了。

完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons5

　　基本的配置都讲完了，后续系列中会讲到优化webpack配置、开发生成配置的拆分、构建优化和服务代理，mock数据等功能

　　如果本文对你有帮助，请给个 star，感谢^_^

推荐阅读

js
Vue项目优化上线

1.移除consol.log()的babel插件安装：npmibabel-plugin-transform-remove-console-D配置：babel.config.js：这 ... [详细]

蜡笔小新 2023-10-17 07:57:34
request
Spring常用注解（绝对经典），全靠这份Java知识点PDF大全

本文介绍了Spring常用注解和注入bean的注解，包括@Bean、@Autowired、@Inject等，同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用，以及@Autowired和@Inject的区别和用法。此外，还提到了@Required属性的配置和使用。 ... [详细]

蜡笔小新 2023-12-12 10:15:07
function
VueCLI多页分目录打包的步骤记录

本文介绍了使用VueCLI进行多页分目录打包的步骤，包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]

蜡笔小新 2023-12-11 16:14:11
js
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
text
如何限制php数据库链接数和连接超时时间？

本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目，以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数，以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]

蜡笔小新 2023-12-14 14:06:10
jar
flowable工作流流程变量_信也科技工作流平台的技术实践

1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]

蜡笔小新 2023-12-13 10:17:15
ip
JavaScript进化：从迁徙到TypeScript

本文介绍了JavaScript进化到TypeScript的历史和背景，解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识，并提到了在项目开发中使用TypeScript的好处。最后，作者表示对TypeScript进行尝试和探索的态度。 ... [详细]

蜡笔小新 2023-12-09 19:52:20
text
HashRouter 改为 Router 就全部空白页了。也不报错。

本文讨论了将HashRouter改为Router后，页面全部变为空白页且没有报错的问题。作者提到了在实际部署中需要在服务端进行配置以避免刷新404的问题，并分享了route/index.js中hash模式的配置。文章还提到了在vueJs项目中遇到过类似的问题。 ... [详细]

蜡笔小新 2023-12-09 10:26:51
post
微信民众号商城/小顺序商城开源项目介绍及使用教程

本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目，包括前端和后端的目录结构，以及所使用的技术栈。同时提供了项目的运行和打包方法，并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接，以及加入前端交流QQ群的方式。 ... [详细]

蜡笔小新 2023-12-09 08:45:47
text
webpack二刷之二、loader资源模块加载器

loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件，也就是说它会把打包过程中所有遇到的 ... [详细]

蜡笔小新 2023-10-17 21:26:42
js
webpack vue 构建的项目，npm run build后路径问题

npmrunbuild后dist文件夹下面直接浏览器打开index.html，css和js的路径都不正确。放到跟目录下就正常了，iis上同样只能在根目录下。我项目的目录如下： ... [详细]

蜡笔小新 2023-10-17 20:07:40
web
【前端工具】nodejs+npm+vue 安装（windows）

预备先看看这几个是干嘛的，相互的关系是啥。nodejs是语言，类比到php。npm是个包管理，类比到composer。vue是个框架&# ... [详细]

蜡笔小新 2023-10-17 20:02:12
ip
1 Vue基础

Vue基础一、什么是Vue1.1概念Vue(读音vjuː，类似于view)是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不 ... [详细]

蜡笔小新 2023-10-17 19:45:53
ip
React 小白初入门

推荐学习：React官方文档：https:react.docschina.orgReact菜鸟教程：https:www.runoob.c ... [详细]

蜡笔小新 2023-10-17 16:10:45
js
快速学习RN之环境搭建和跑demo(一)

RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]

蜡笔小新 2023-10-17 15:29:16

浪漫的美食

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章