特別詳細的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的打包文件

+ 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加載位置

  • 把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;
    }
}複製代碼

效果以下：

sass

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');
}複製代碼

效果以下：

image

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,
                        },
                    },
                ],
            },
	 ]
複製代碼

效果以下：

icon

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"
  },複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程