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