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文件即可