快速创建React项目并配置webpack

目录

• 1.快速创建React项目
• 2.安装所需包
• 3.根目录创建webpack.config.js文件，代码如下
• 4.在根目录下添加文件 .babelrc，代码如下
• 5.修改 package.json
• 6.修改public/index.html文件
• 7.修改src/index.js文件
• 8.修改src/App.js文件
• 9.修改 src/App.css文件
• 10.在项目根目录下执行

1.快速创建React项目

npm install -g create-react-app // 全局安装create-react-app (只需要安装一次)
create-react-app demo // 创建项目
cd demo // 进入项目目录

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

创建的项目目录结构

-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，已经默认安装了，我们安装UI框架ant design即可。

npm i --save antd

安装webpack的两个基本项

npm i webpack webpack-cli --save-dev

安装webpack

npm i -D webpack 

安装webpack服务器 webpack-dev-server，让启动更方便

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

自动创建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相关loader
npm i --save-dev node-sass sass-loader  // scss 相关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.根目录创建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文件

7.修改src/index.js文件

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

ReactDOM.render(
    ,
    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 (
      

        
我是首页
      
    );
  }
}
export default App;

9.修改 src/App.css文件

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

10.在项目根目录下执行

npm run dev

到此这篇关于创建React项目并配置webpack的文章就介绍到这了,更多相关创建React配置webpack内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！