webpack 配置react脚手架

1 react 基本js文件:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>,document.getElementById('root'))

// 把app组件传给 reactCreateElement 作为的参数 要引入 react

 

基本 webpack.config 配置:

const path = require('path');
module.exports = {
    entry:[
        app: path.join(__dirname,'../clinet/app.js'); //使用path,设置绝对路径,注意 dirname前面是两个下划线
    ],
    output:[
        filename:'[name].[hash].js', //依赖的文件发生变化的时候,hash值变化。
        path:path.join(__dirname,'../dist'),//输出的绝对路径
        publicPath:'/public' //设置引用文件的公共路径,用于设置CDN的路径
    ],
    module:{
        rules:[
            {
                test:/.jsx$/,
                loader:'babel-loader'//编译jsx,es6,es7等语法
                //这里要安装 babel: npm i babel-loader -D
                //babel-loader只是一个webpack的插件,不包括babel的核心代码,所以还要安装:
                //babel-core: npm i bable-core -D
                //此外,bable-core 默认是编译 es6的,为了还编译jsx,所以要进行另外的配置:.babelrc 文件
            }
        ]
    }
}

 对应的 babelrc文件

// .babelrc 文件
{
    "presets":[ //指定babel编译哪些类型
        ["es2015",{"loose":true}],//指定 es2015是 松散的不是严格的
        "react"    //在这里加上react,这个支持之后,babel才会编译react代码
    ]
}
//安装上述依赖文件:
// npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react -D

 

为了打开html文件:

安装: 1 npm i html-webpack-plugin -D 

webpack.config.js 文件

const path = require('path');
const HTMLPlugin =require('html-webpack-plugin')
module.exports = {
    entry:[
        app: path.join(__dirname,'../clinet/app.js'); //使用path,设置绝对路径,注意 dirname前面是两个下划线
    ],
    output:[
        filename:'[name].[hash].js', //依赖的文件发生变化的时候,hash值变化。
        path:path.join(__dirname,'../dist'),//输出的绝对路径
        publicPath:'/public/' //设置引用文件的公共路径,用于设置CDN的路径
    ],
    module:{
        rules:[
            {
                test:/.jsx$/,
                loader:'babel-loader'//编译jsx,es6,es7等语法
                //这里要安装 babel: npm i babel-loader -D
                //babel-loader只是一个webpack的插件,不包括babel的核心代码,所以还要安装:
                //babel-core: npm i bable-core -D
                //此外,bable-core 默认是编译 es6的,为了还编译jsx,所以要进行另外的配置:.babelrc 文件
            },
            {
                test:/.js$/,
                loader:'babel-loader',
                exclude:[
                    path.join(__dirname,'../node_modules')
                ]
            }
        ]
    },
    plugins:[
        new HTMLPlugin(); //有两个作用:1 生成html文件 ,2:根据output的配置把entry 文件打包
    ]
}

 

2 服务端渲染的配置

单页面存在的问题:

1 SEO不友好

2 首次请求等待时间过长,体验不友好。

首先看一下客户端的入口文件 app.js

客户端的入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>,document.getElementById('root'))

对比服务端渲染的入口文件  server-entry.js 文件:都是为了引入 最外层组件 <App/> 但是服务端没有dom元素,所以只能抛出 <App/> 组件,而不能挂载到 root的div节点上。

// 在服务端运行的文件
import React from 'react';
import App from './App.jsx';

export default <App/>

服务端和客户端的入口文件都是把<App> 组件提供出来,不同的是客户端可以直接把组件挂载到 root上。而服务器端的入口文件是提供 <App/>组件,之后在服务器端的server.js中,将其挂载到root中;且客户端和服务器端用的是同一个html模板。因为入口文件不同,所以两个的webpack配置文件也不同:

 

新建一个服务器端的webpack打包的文件:

const path = require('path');
module.exports = {
    target:'node', //这里是新的配置,web/node 规定在哪里使用
    entry:[
        app: path.join(__dirname,'../clinet/serve-entry.js'); 
    ],
    output:[
        filename:'server-entry.js', //node.js 去 improt 这个js文件,且在服务器端没有缓存,不需要hash
        path:path.join(__dirname,'../dist'),//输出的绝对路径
        publicPath:'/public/',
        libraryTarget: 'commonjs2' //打包出来的js 使用的模块方案, 包括 AMD CMD CommonJS等规范,这里使用的是commonjs2,适用于node端
    ],
    module:{
        rules:[
            {
                test:/.jsx$/,
                loader:'babel-loader'//编译jsx,es6,es7等语法
                //这里要安装 babel: npm i babel-loader -D
                //babel-loader只是一个webpack的插件,不包括babel的核心代码,所以还要安装:
                //babel-core: npm i bable-core -D
                //此外,bable-core 默认是编译 es6的,为了还编译jsx,所以要进行另外的配置:.babelrc 文件
            },
            {
                test:/.js$/,
                loader:'babel-loader',
                exclude:[
                    path.join(__dirname,'../node_modules')
                ]
            }
        ]
    }
}

修改配置项:

 

//修改 package.json文件

{
    "script":{
        "build:clinet": "webpack --config build/webpack.config.client.js",
        "build:server": "webpack --config build/webpack.config.server.js",
        "clear": "rimraf dist" //rimraf 是node的一个包,专门用来删除文件夹
        "build": "npm run clear && npm run build:client && npm run build:server",        
    }
}

//安装rimraf包。 npm i rimraf -D 

然后每次打包完,会有三个文件 客户端的js 服务器端的js 还有一个html。

上面介绍的是 客户端和服务器端的 webpack 配置文件;

===================

下面编写 express 服务端:

首先安装  npm i express -S 

新建 server文件夹 建立 server.js文件:

 

说明: 1. dist/server-entry文件是打包生成的js文件;res.send()渲染的就是生成的js文件;

2. app.get 获取到浏览器所有的请求,返回 渲染的 js文件;监听端口在3333

3. 由于html中 使用的是es6的语法: export default <App/>;而node中又不能使用 impront { app } from './app' 这种结构赋值的语法,所以这里要用 require().default 获取默认值;

然后在配置json文件中,设置服务端启动命令:

{
    "script":{
        "start": "node server/server.js    "    
    }
}

 运行服务端代码之后,服务端返回的只是打包后入口文件中写的代码 字符串:‘<div></div>’,我们需要返回的是整个html。

 步骤一:先在client文件夹下新建 模板文件 template.html: 其中关键代码:

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

把生成的文件覆盖掉 <!--app-->;

然后修改客户端的配置文件。webpack.config.client.js中的模板插件:

{
    plugins: [
        new HTMLPlugin({
          template: path.join(__dirname, '../client/template.html')
        })
      ]
}

注意这里是改动的客户端的配置文件,客户端打包生成的html文件 ,然后服务端 server.js 去引用:

const express = require('express')
const ReactSSR = require('react-dom/server');
const fs = require('fs')
const path = require('path')
const serverEntry = require('../dist/server-entry').default;//引入的是服务端的配置打包后的js文件
const template = fs.readFileSync(path.join(__dirname, '../dist/index.html'), 'utf8')//同步引入客户端打包生成的 html 文件,如果不使用 utf8 则是buffer文件

const app = express();
app.use('/public', express.static(path.join(__dirname, '../dist'))); //给静态文件指定返回内容,这里给piblic文件夹下的内容返回的是静态文件的dist文件夹

app.get('*', function (req, res) {
  const appString = ReactSSR.renderToString(serverEntry);
  res.send(template.replace('<!--app-->',appString)) //用返回的js文件替换掉模板中的<app>,然后发送的是模板文件
})

app.listen(3333, function () {
  console.log('server is listening on 3333')
})

注意的是: 客户端和服务端的 output配置中的 publicPath 要写为“public”

output:[
        filename:'[name].[hash].js', //依赖的文件发生变化的时候,hash值变化。
        path:path.join(__dirname,'../dist'),//输出的绝对路径
        publicPath:'/public' //设置引用文件的公共路径,用于设置CDN的路径
]

这样生成的html中引用的静态文件js和css以及图片等路径前缀都是在public下,所以 上面的服务端 server.js 的  

app.use('/public', express.static(path.join(__dirname, '../dist')));  

给访问的 public 目录下的文件返回 dist文件夹下的文件,其他的 * 返回 模板文件

  • 问题1 为啥还要在 服务端的配置文件中 设置 public
  • 问题2 服务端的 server-entry.js 和 客户端的 app.js 有啥区别?


客户端的入口文件 app.js 可以对浏览器进行操作,比如

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>,document.getElementById('root'))


而服务器端的入口文件 server-entry 不可以:

import React from 'react';
import App from './App.jsx';

exprot defalut <App/>


所以后续,对应的webpack.config配置文件也需要设置两个,分别对应客户端和服务器端;
他们两个的入口和出口配置不一样
客户端的配置文件:

{
     entry:[
        app: path.join(__dirname,'../clinet/app.js'); //使用path,设置绝对路径,注意 dirname前面是两个下划线
    ],
    output:[
        filename:'[name].[hash].js', //依赖的文件发生变化的时候,hash值变化。
        path:path.join(__dirname,'../dist'),//输出的绝对路径
        publicPath:'/public' //设置引用文件的公共路径,用于设置CDN的路径
    ],
}


服务器端的配置文件:

{
    target:'node', //这里是新的配置,web/node 规定在哪里使用
    entry:[
        app: path.join(__dirname,'../clinet/serve-entry.js');
    ],
    output:[
        filename:'server-entry.js', //node.js 去 improt 这个js文件,且在服务器端没有缓存,不需要hash
        path:path.join(__dirname,'../dist'),//输出的绝对路径
        publicPath:'/public/',
        libraryTarget: 'commonjs2' //打包出来的js 使用的模块方案, 包括 AMD CMD CommonJS等规范,这里使用的是commonjs2,适用于node端
    ],
}


因此,服务器端和客户端是单独的入口js文件和输出文件。

客户端: client/app.js------> dist/app.hash.js 文件,如下图所示,其提供的组件<App/>挂载到 root下;

服务器端: client/server-entry.js------> dist/server.entry.js 文件,在服务器端 server/server.js的作用下,将其生成的<App/>组件挂载到 root 下。

也就是说,客户端的app.js文件,生成的组件挂载到 root上;服务器端把server-entry生成的组件直接挂载到 root 上。
根据模板文件生成:

<body>
    <div id="root"><!-- app --></div>
    <script type="text/javascript" src="/public/app.9337b7bd3bfeb9af5f86.js"></script>
</body>

两个是独立的,所以两个都要加 /public,这样服务器就会根据两个位于 public 文件夹下 而返回对应的app.hash.js 和 server.entry.js文件,而不是 模板代码。




 

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10991630.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值