特别详细的react项目搭建步骤

时间 2019-11-06

标签特别详细 react 项目搭建步骤栏目 React 繁體版

原文原文链接

github地址： github.com/XinYueXiao/…

1.安装webpack

yarn add webpack --savecss

1.1 新建 webpack.config.js、新建入口文件src/app.js、配置 webpack.config.js 入口及出口

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    }
};复制代码

1.2 执行 node_modules/.bin/webpack 便可在dist文件下查看app.js的打包文件

添加plugins,安装插件HtmlWebpackPlugin

+ var HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');

  module.exports = {
    ......
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
     ]
 };复制代码

1.3 添加loader，并添加module

yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --devhtml

module.exports = {
...
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }
        ]
    }
...复制代码

2. react安装与配置

2.1 安装相关依赖

yarn add babel-preset-react@6.24.1node

yarn add react@16.2.0 react-dom@16.2.0react

2.2 修改文件 app.js-->app.jsx并添加配置文件

import React from 'react';
import ReactDOM from 'react-dom'
ReactDOM.render(
    <h1>hello</h1>,
    document.getElementById('app')
)复制代码

修改webpack.config.js

entry: './src/app.jsx',//修改入口文件
 module: {
        rules: [
            {
                test: /\.jsx$/,//匹配规则由js->jsx
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']//添加react
                    }
                }
            }
        ]
    },
复制代码

从新打包 node_modules/.bin/webpack，在浏览器中查看 dist/index.html

3. 添加样式解析配置webpack.config.js

3.1 配置css

yarn add style-loader@0.19.1 css-loader@0.28.8 --devwebpack

module: {
        rules: [
			...,
			{//添加样式loader
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader',
                ]
            }
        ]
    }复制代码

新建 src/index.css，在app.jsx引入import './index.css'git

#app { color: pink; }github

从新打包 node_modules/.bin/webpack刷新页面web

从新打包 node_modules/.bin/webpack刷新页面json

查看打包后文件css的渲染要等全部js执行完成才加载，则有一段等待时间，怎么解决这个问题浏览器

把css文件提取出来加载，添加依赖yarn add extract-text-webpack-plugin@3.0.2 --dev

按照官方配置修改webpack.config.js

//引入
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//替换module->css
 rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
 //添加plugins
 plugins: [
	 ...,
  +  new ExtractTextPlugin("index.css"),
  ]复制代码

从新打包 node_modules/.bin/webpack，dist下新增了index.css文件，

添加了css引入<link href="index.css" rel="stylesheet">在浏览器中查看 dist/index.html样式已生效

3.2 配置sass

安装相关依赖 yarn add sass-loader@6.0.6 node-sass@4.10.0 --dev
配置sass

//添加scss解析
 rules: [
	 ...,
       {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "sass-loader"]
                })
            }
    ]
复制代码

新增index.sass，在index.jsx引入sass，从新打包 node_modules/.bin/webpack

//index.scss
body {
    background: beige;

    #app {
        font-size: 100px;
    }
}复制代码

效果以下：

4.图片处理url-loader

舒适提示：使用url-loader处理小图片比较方便，会自动处理成base64

安装相关依赖 yarn add url-loader@0.6.2 file-loader@1.1.6 --dev
添加图片处理配置

rules: [
	 ...,
	 	{
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
	 ]复制代码

添加image引用

body {
    background: url('./banner.jpg');
}复制代码

效果以下：

5. 添加字体库

添加字体库 yarn add font-awesome 并在 app.jsx 中引入 font-awesome/css/font-awesome.min.css

import 'font-awesome/css/font-awesome.min.css'
ReactDOM.render(
    <div>
        <i className='fa fa-address-book'></i>
        <h1>hello</h1>
    </div>
    ,
    document.getElementById('app')
)
复制代码

添加字体打包配置

rules: [
	 ...,
	 //字体图表的处理
            {
                test: /\.(woff|woff2|svg|ttf|eot|otf)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
	 ]
复制代码

效果以下：

6. 提出公共模块分出文件类型

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

module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.js'
    },
    module: {
        rules: [
            //react语法处理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            //css文件处理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            //sass文件处理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "sass-loader"]
                })
            },
            //图片处理
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resourse/[name].[ext]'
                        },
                    },
                ],
            },
            //字体图表的处理
            {
                test: /\.(woff|woff2|svg|ttf|eot|otf)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resourse/[name].[ext]'
                        },
                    },
                ],
            },

        ]
    },
    plugins: [
        //处理html文件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        //独立css文件
        new ExtractTextPlugin("css/[name].css"),
        //提出公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',//手动指定的公共模块
            filename: 'js/base.js'
        })
    ]
};复制代码

6.配置 webpack-dev-server

发如今每次更新时都要执行 node_modules/.bin/webpack，很繁琐，则加入webpack-dev-server 时时更新修改，步骤以下：

安装 yarn add webpack-dev-server@2.9.7 --dev并配置webpack.config.js

output: {
        path: path.resolve(__dirname, 'dist'),
     +   publicPath: '/dist/', //解决启动后，字体文件404错误
        filename: 'js/app.js'
    },
		...,
devServer: {

    }复制代码

使用node_modules/.bin/webpack-dev-server 进入 http://localhost:8080/dist/ 则能够时时更新修改
配置端口号

devServer: {
        port: 8022,
    }复制代码

在 package.json 配置打包命令

"scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
	//配置线上打包命令
    "dist": "node_modules/.bin/webpack -p"
  },复制代码