初始化一个react项目

初始化React项目

最新推荐文章于 2025-06-03 21:55:24 发布

原创最新推荐文章于 2025-06-03 21:55:24 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #js #前端

前端同时被 2 个专栏收录

64 篇文章

订阅专栏

前端——react

3 篇文章

订阅专栏

初始化一个react项目

mkdir init_react
cd init_react
npm init //如果没有什么特殊的配置一路回车，得到package.json文件

目录结构

dist ---------------------------------------------> //用于存放webpack打包之后的项目文件

index.html ----------------------------------> //webpack打包之后的html文件

main.hash值.bundle.js ---------------------> //webpack打包之后的js文件

node_modules --------------------------------> //项目当中使用的第三方库文件存放目录

src ----------------------------------------------> //生产环境中代码存放目录

index.html ----------------------------------> //前端统一的html模版文件

index.js -------------------------------------> //项目的主入口文件

index.less -----------------------------------> //项目中的样式文件

.babelrc ----------------------------------------> //babel的配置文件

package.js

webpack.config.js -----------------------------> //webpack的配置文件

安装webpack打包工具和webpack-dev-server服务器

npm install webapck --save
npm install webpack-dev-server --save

安装react和react-dom

npm install react --save
npm install react-dom --save

安装babel

npm install babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-polyfill babel-core --save-dev

创建.babelrc文件,配置babel 预处理

{
   "presets": ["es2015","react","stage-0"]
}

处理样式需要安装less

npm install less --save

安装webpack 的 loader

npm install babel-loader style-loader css-loader less-loader --save-dev

安装webpack插件

npm install extract-text-webpack-plugin html-webpack-plugin --save-dev

创建webpack.config.js文件

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')  
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    devtool:'eval', //source-map
    entry:{
        main:'./src/index.js'//入口文件
    },
    output:{
        path:path.join(__dirname, 'dist'),//出口文件
        filename: '[name].[hash:8].bundle.js'
    },
    resolve: {
        extensions: [' ', '.js','.jsx', '.json','.css','.less']
    },
    module:{
        rules: [{
            test: /\.less$/,//加载less样式的loader
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'less-loader']
            })
        }, {
            test: /\.js?$/,//用于解析es6语法的babel-loader
            exclude: /node_modules/,
            use: 'babel-loader'
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), //热更新
        new webpack.NoEmitOnErrorsPlugin(), //错误不编译
        new ExtractTextPlugin('style.css'), //css模块独立
        new HtmlWebpackPlugin({
                title: 'Redux Practive', //标题
                // favicon: './src/assets/img/favicon.ico', //favicon路径
                filename: './index.html', //生成的html存放路径，相对于 path
                template: './src/index.html', //html模板路径
                inject: true, //允许插件修改哪些内容，包括head与body`
                minify: { //压缩HTML文件
                    removeComments: true, //移除HTML中的注释
                    collapseWhitespace: false //删除空白符与换行符
                }
        })
     ]
}

修改package.json

{
  "name": "init_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline --progress --colors --watch --compress --content-base ./dist  --port 8086 --host 0.0.0.0",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "less": "^2.7.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.29.0",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2"
  }
}

创建html模版文件

在项目的根目录下创建src目录并创建index.html

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

在src目录下创建index.js

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
)