react项目打包

1.全局安装webpack和webpack-cli 指令：npm install webpack@xxxx webpack-cli -g

2.本地安装webpack和webpack-cli 指令：npm install webpack@xxxx webpack-cli  --save-dev

3.配置webpack.config.js 

const path = require('path')
module.exports = {
    entry: './src/index.js', //打包文件入口
    output: {               //打包文件出口
        path: path.resolve(__dirname, '/dist'),//引入path使用相对路径
        filename: 'bundle.js'
    },
    module: {
        rules:[
            {
                test: /\.js?$/,//匹配末尾为js的文件，
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"//使用babel-loader加载器进行解析
                    }
                ]
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }



}

4.配置.babelrc 文件，使得webpack能解析react和class和箭头函数（明天好好研究

 

{
    "presets": ["@babel/preset-env","@babel/preset-react"],
    "plugins": [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]

  }

5.打包，指令：webpack ./src/index.js -o ./dist/production.js --mode=production

 注意webpack不能太高，太高的话需要卸载重装，全局卸载 webpack ：npm uninstall webpack - g

 本地卸载webpack ：npm uninstall webpack

 最好删除node_module文件

然后打包后的文件需要有挂载点