使用 Webpack 4 和 Babel 7 创建 React 应用程序

淩亂°似流年 2021-11-23 14:24 184阅读 0赞

mkdir react\_project  
　　cd react\_project  
　　  
　　npm init -y

npm i webpack@4 webpack-cli@3 -D //i：install -D：- save-dev  
　　npm i react@16 react-dom@16 -S  
　　npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D  
　　npm i html-webpack-plugin -D  
　　npm i webpack-dev-server -D  
　　npm i css-loader style-loader -D

webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.js|\.jsx$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                importLoaders: 1,
                                localIdentName: '[name]_[local]_[hash:base64]',
                                sourceMap: true,
                                minimize: true
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: './src/index.html',
                filename: './index.html'
            })
        ]
    };

.babelrc

{
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }

src/index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>React、Webpack4 and Babel 7</title>
    </head>
    <body>
      <section id="index"></section>
    </body>
    </html>

src/index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    
    const Index = () => {
      return <div>Hello World React!</div>;
    };
    
    ReactDOM.render(<Index />, document.getElementById('index'));

npm run start　　//启动项目

//部分内容来自网络，仅记录方便自己参考

转载于:https://www.cnblogs.com/yongfengnice/p/11086715.html