React-webpack-router

最新推荐文章于 2021-05-21 19:06:50 发布

路飞说了

最新推荐文章于 2021-05-21 19:06:50 发布

阅读量341

点赞数

分类专栏： React 文章标签： Webpack React Router

本文链接：https://blog.csdn.net/qq_28091923/article/details/84105256

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack.config.js文件配置详解

1、 html-webpack-plugin插件

HtmlWebpackPlugin简化了HTML文件的创建，该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。只需添加插件到你的 webpack 配置如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlwebpackPlugin({
      title: 'name',
      filename: 'shlife-webapp.html',
      template: 'entry/index-template.html',
      chunks: ['commons', 'index']
    })
  ],
  }

这将会产生一个包含以下内容的文件 dist/index.html：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

如果你有任何CSS assets 在webpack的输出中（例如，利用ExtractTextPlugin提取CSS），那么这些将被包含在HTML head中的标签内。

React-router

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。安装很简单npm i react-router-dom --save,安装了淘宝镜像的就用cnpm吧。

React-router-dom的核心用法

HashRouter和BrowserRouter

它们两个是路由的基本，就像盖房子必须有地基一样，我们需要将它们包裹在最外层，我们只要选择其一就可以了。现在讲它们的不同：

HashRouter
如果你使用过react-router2或3或者vue-router，你经常会发现一个现象就是url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。
例：http://localhost:3030/#/
BrowserRouter
很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。
它的原理是使用HTML5 history API (pushState, replaceState, popState)来使你的内容随着url动态改变的，如果是个强迫症或者项目需要就选择BrowserRouter吧。下面我们将主要结合它来讲解。
这里讲一个它们的基础api，basename。如果你的文件放在服务器的二级目录下则可以使用它。
在这里插入图片描述
它的效果如下图,当你的主页前面是有一级目录calendar时，同样会显示主页的内容。它常常配合Link使用。
http://localhost:3030/calendar/
Route
Route是路由的一个原材料，它是控制路径对应显示的组件。我们经常用的是exact、path以及component属性。
在这里插入图片描述
exact控制匹配到/路径时不会再继续向下匹配，path标识路由的路径，component表示路径对应显示的组件。后面我们将结合NavLink完成一个很基本的路由使用。同时我们可以设置例如/second/:id的方式来控制页面的显示，这需要配合Link或者NavLink配合使用

devServer

webpack-dev-server 能够用于快速开发应用程序。
allowedHosts
此选项允许您将允许访问开发服务器的服务列入白名单。
开头的值.可以用作子域通配符。

allowedHosts: [
  'host.com', 
  'subdomain.host.com',  -->   'host.com'
  'subdomain2.host.com', -->  host.com'
  'host2.com'
]

compress boolean
一切服务都启用gzip 压缩：

historyApiFallback boolean
当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html

host string
指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，指定如下：

host: "0.0.0.0"

hot boolean
启用 webpack 的模块热替换特性：

inline boolean
在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。

也可以使用 iframe 模式，它在通知栏下面使用 <iframe> 标签，包含了关于构建的消息。切换到 iframe 模式：

open boolean
当open启用时，开发服务器将打开浏览器。

openPage string
指定在打开浏览器时导航到的页面。

openPage: '/different/page'

port
指定要监听请求的端口号：

port: 8080

路飞说了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录