zoukankan      html  css  js  c++  java
  • react服务端渲染(三)配置webpack编译打包jsx语法

    const Path = require('path');
    const nodeExternals = require('webpack-node-externals'); //针对服务器端,对于require这样的代码进行与客户端不同的处理
    module.exports = {
        target: 'node', //针对服务器端,对于require这样的代码进行与客户端不同的处理
        mode: 'development',
        entry: './src/index.js',
        output: { 
            filename: 'bundle.js',
            path: Path.resolve(__dirname, 'build')
        },
        externals: [nodeExternals()],
        module: {
            rules: [{
                test: /.js?$/,
                loader: 'babel-loader', //需要安装babel-loader babel-core
                exclude: /node-modules/,
                options: {
                    presets: [ //编译规则
                        'react',  //需要安装babel-preset-react
                        'stage-0', //用那个就需要安装那个 babel-preset-stage-0
                        'es2015', //babel-preset-es2015
                        ['env', { targets: {browsers: ['last 2 versions']} }] //兼容所有浏览器最后的两个版本 安装babel-preset-env
                    ]
                }
            }]
        }
    }
    1. target: ‘node’ 标识webpack打包的代码是node端,从而使用不同的打包方式。例如require('path')在浏览器端是需要将path模块的代码都打包进来,而服务端只需要保留require('path')这句代码,而不需要打包path这个模块进来。
    2. 可能仅仅使用target是不够的,所以增加webpack-node-externals包的使用。
    3. 对于我们安装的所有解析器都记得安装对应的依赖 babel-preset-xxx
    4. 最后执行打包好的bundle.js文件即可

    项目地址:git@github.com:longlongdan/Reactssr.git

  • 相关阅读:
    高斯消元算法
    Fermat小定理的证明
    Pollard Rho 算法简介
    做一些无聊的题
    永远不要相信自己的傲慢
    笔记-数据结构进阶
    笔记-区间问题
    线段树板子
    [DarkBZOJ3694] 最短路
    [CF321D] Ciel and Flipboard
  • 原文地址:https://www.cnblogs.com/longlongdan/p/11270691.html
Copyright © 2011-2022 走看看