webpack——实现对React代码的打包(八)

参考链接: https://babeljs.io/docs/en/babel-preset-react
安装:

npm i react react-dom --save
npm install --save-dev @babel/preset-react

src/index.js

import "@babel/polyfill"
import React, {Component} from 'react'
import ReactDom from 'react-dom'

class App extends Component{
    render() {
        return <div>hello world</div>
    }
}

ReactDom.render(<App />, document.getElementById('root'))

webpack.config.js
添加语句: "@babel/preset-react"

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    mode: 'development',
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 

                // "plugins": [
                //     [
                //       "@babel/plugin-transform-runtime",
                //       {
                //         //安装: npm install --save @babel/runtime-corejs2
                //         "corejs": 2,
                //         "helpers": true,
                //         "regenerator": true,
                //         "useESModules": false,
                //       }
                //     ]
                // ]
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        //publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
        publicPath: '/'  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件
    ]
}

运行npm start,页面就显示出hello world