node识别react的webpack的配置

node识别react的webpack的配置

const path = require('path');
const nodeExternals = require('webpack-node-externals');/**  我用它webpack-node-externals来避免在编译期间node_modules中 的错误。
webpack-node-externals 说，允许您定义外部 - 不应捆绑的模块。*/

module.exports = {
    target: 'node', // 如果想再服务端使用webpack 就要加这个配置项,还要 cnpm install webpack-node-externals --save 
    mode:'development',
    entry: './src/index.js', // 打包的入口文件
    output: { // 打包后的文件的配置项
        filename: 'bundle.js', // 打包过后的文件名称
        path: path.resolve(__dirname, 'build'),// 文件打包过后要存放的路径，这里要用到path 核心模块

    },
    externals:[nodeExternals()],// 进行调用,
    module : { // 打包的规则
        rules:[
            {
                test: /\.js?$/, // 只要是js结尾的文件就要使用以下的规则
                loader: 'babel-loader',  // 若要下载babel-loader 还要下载 babel-core 
                exclude: /node_modules/,// 不打包这里面的相关文件
                options: { // 配置额外的配置项
                    presets:['@babel/preset-react',['@babel/env',{ // 在env环境下进行以下的配置,也需要进行安装 cnpm install @babel/preset-env --save
                        targets: {
                            browsers: ['last 2 versions'],// 打包的过程中获取兼容所有主流的浏览器最后的两个版本
                        }
                    }]], /**
                    当我们使用babel-loader进行编译的时候，启动
                    presets是额外的配置规则
                    我们需要进行安装通过 npm install @babel/preset-react --save 来让webpack 能打包react的相关代码 ,
                    
                    */ 
                }
            }
        ]
    }
}

webpack --config webpack.server.js 可进行打包