zoukankan      html  css  js  c++  java
  • 使用 Webpack 4 和 Babel 7 创建 React 应用程序

    
    

      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  //启动项目

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



     
  • 相关阅读:
    python函数--isalpha()方法
    python函数--isdigit()方法
    python函数--isalnum()方法
    python函数--range()方法
    python函数--len()方法
    python函数--介绍
    Linux命令总结--awk命令
    Linux命令总结--pwd命令
    Linux命令总结--rm命令
    Linux命令总结--cp命令
  • 原文地址:https://www.cnblogs.com/yongfengnice/p/11086715.html
Copyright © 2011-2022 走看看