欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

快速創(chuàng)建React項目并配置webpack

 更新時間：2022年01月13日 16:30:15   作者：羅毅豪  
這篇文章主要介紹了創(chuàng)建React項目并配置webpack,在這里需要注意，Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node，本文給大家介紹的非常詳細，需要的朋友參考下吧

1.快速創(chuàng)建React項目

npm install -g create-react-app // 全局安裝create-react-app (只需要安裝一次)
create-react-app demo // 創(chuàng)建項目
cd demo // 進入項目目錄

注意，Create React App requires Node 14 or higher.需要安裝高版本的node。

創(chuàng)建的項目目錄結(jié)構(gòu)

-Demo // 項目名
  -node_modules // 存放第三方包
  -public
    -favicon.ico
    -index.html
    -manifest.json
  -src // 頁面代碼都寫在這下面
    -App.css
    -App.js
    -App.test.js
    -index.css
    -index.js //項目入口
    -logo.svg
    -serviceWorker.js
    -setupTest.js
.gitignore
package.json
README.md
yarn.lock

2.安裝所需包

由于package.json里包含react和react-dom，已經(jīng)默認安裝了，我們安裝UI框架ant design即可。

npm i --save antd

安裝webpack的兩個基本項

npm i webpack webpack-cli --save-dev

安裝webpack

npm i -D webpack

安裝webpack服務(wù)器 webpack-dev-server，讓啟動更方便

npm i --save-dev webpack-dev-server

自動創(chuàng)建html文件 html-webpack-plugin

npm i --save-dev  html-webpack-plugin

清除無用文件 clean-webpack-plugin，將每次打包多余的文件刪除

npm i --save-dev clean-webpack-plugin

樣式編譯loader插件

npm i --save-dev style-loader css-loader  // css相關(guān)loader
npm i --save-dev node-sass sass-loader  // scss 相關(guān)loader
npm i --save-dev file-loader url-loader // 加載其他文件，比如圖片，字體

安裝babel

npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react  @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader

3.根目錄創(chuàng)建webpack.config.js文件，代碼如下

const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'img/[name].[hash:7].[ext]'
            }
        }, {
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    devServer: {
        // contentBase: './build',
        port: 8081, // 端口號
        // inline: true,
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlPlugin({
            template: 'public/index.html'
        })
    ]
}

4.在根目錄下添加文件 .babelrc，代碼如下

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

5.修改 package.json

"scripts": {
    "start": "webpack-dev-server --open --mode production",
    "watch": "webpack --watch",
    "build": "webpack --mode production",
    "dev": "webpack  --mode development& webpack-dev-server --open  --mode development",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

6.修改public/index.html文件

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>demo</title>
  </head>
  <body>
      <div id="root"></div>
  </body>
</html>

7.修改src/index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

8.修改src/App.js文件

import React, { Component } from 'react';
import './App.css';  // 引入樣式文件
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className="main">
        <div>我是首頁</div>
      </div>
    );
  }
}
export default App;

9.修改 src/App.css文件

.main {
  background: darkgray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

10.在項目根目錄下執(zhí)行

npm run dev

到此這篇關(guān)于創(chuàng)建React項目并配置webpack的文章就介紹到這了,更多相關(guān)創(chuàng)建React配置webpack內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • react如何獲取state的值并更新使用

    react如何獲取state的值并更新使用

    這篇文章主要介紹了react如何獲取state的值并更新使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • react的嚴格模式和解決react useEffect執(zhí)行兩次問題

    react的嚴格模式和解決react useEffect執(zhí)行兩次問題

    文章總結(jié)：本文詳細探討了React中useEffect執(zhí)行兩次的問題,主要歸因于React的嚴格模式,嚴格模式在開發(fā)模式下會故意重復(fù)調(diào)用一些生命周期方法,以幫助開發(fā)者發(fā)現(xiàn)潛在的問題,包括不安全的生命周期、過時的ref API、廢棄的findDOMNode方法、意外的副作用等
    2025-01-01
  • React前端框架實現(xiàn)原理的理解

    React前端框架實現(xiàn)原理的理解

    React是前端開發(fā)每天都用的前端框架，自然要深入掌握它的原理。我用?React?也挺久了，這篇文章就來總結(jié)一下我對?react?原理的理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助
    2022-07-07
  • 詳解React中的setState執(zhí)行機制

    詳解React中的setState執(zhí)行機制

    setState是React組件中用于更新狀態(tài)的方法,是類組件中的方法,用于更新組件的狀態(tài)并重新渲染組件,本文給大家詳細介紹了React中的setState執(zhí)行機制,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • react 原生實現(xiàn)頭像滾動播放的示例

    react 原生實現(xiàn)頭像滾動播放的示例

    這篇文章主要介紹了react 原生實現(xiàn)頭像滾動播放的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-04-04
  • 引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享

    引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享

    eslint的配置引入比較簡單，網(wǎng)上有比較多的教程，而stylelint的教程大多語焉不詳。在這里，我會介紹一下我在引入stylelint所遇到的坑，以及解決方法
    2021-11-11
  • React router cache route實現(xiàn)緩存頁面流程介紹

    React router cache route實現(xiàn)緩存頁面流程介紹

    react-router自身沒有路由緩存的特性，在5.x版本之前，我們可以基于react-router-cache-route來實現(xiàn)路由緩存功能。但是react-router 6.x在實現(xiàn)上做了比較大的變化，react-router-cache-route沒有提供相應(yīng)的支持
    2023-01-01
  • Zustand介紹與使用 React狀態(tài)管理工具的解決方案

    Zustand介紹與使用 React狀態(tài)管理工具的解決方案

    本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能
    2024-10-10
  • react組件基本用法示例小結(jié)

    react組件基本用法示例小結(jié)

    這篇文章主要介紹了react組件基本用法,結(jié)合實例形式分析了react組件傳值、生命周期、受控組件和非受控組件等相關(guān)操作技巧,需要的朋友可以參考下
    2020-04-04
  • 詳解React Native頂|底部導(dǎo)航使用小技巧

    詳解React Native頂|底部導(dǎo)航使用小技巧

    本篇文章主要介紹了詳解React Native頂|底部導(dǎo)航使用小技巧 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09

最新評論