webpack2 react 簡單介紹（一）

什么是React？

React是一個(gè)JavaScript庫用于構(gòu)建用戶界面。React能輕松的創(chuàng)建出交互式組件。在你的應(yīng)用里為每個(gè)狀態(tài)設(shè)計(jì)簡單的視圖，當(dāng)數(shù)據(jù)有變化時(shí)React可以高效的更新和渲染組件。

React都干了什么？

  • UI

React負(fù)責(zé)UI層面的展現(xiàn)。一般的情況下，我們在開發(fā)過程中，直接使用HTML來構(gòu)建UI，React換了一種思路解決問題，它把UI拆分成組件，使得它可以易于拓展和維護(hù)。因此它引入了JSX這種語法規(guī)則，可以讓我們使用類似HTML的語法去寫JS的函數(shù)調(diào)用。

  • 虛擬DOM
    瀏覽器渲染頁面的一般過程通常是這樣的：
    加載html->生成DOM樹->解析css生成Render樹->生成頁面
    React的虛擬DOM是這樣的：
    生成虛擬DOM->diff算法->必要的DOM更新
  • 數(shù)據(jù)流

在React中，數(shù)據(jù)的流向是單向的——從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)，如果頂層組件的某個(gè)prop改變了，React會遞歸的向下遍歷整棵組件樹，重新渲染所有使用這個(gè)屬性的組件。
React組件內(nèi)部還具有自己的狀態(tài)，這些狀態(tài)只能在組件內(nèi)修改。React的組件你可以把它們稱為是一個(gè)函數(shù)，它接受props和state作為參數(shù)，返回一個(gè)虛擬DOM的表現(xiàn)。

什么是webpack？

Webpack是一種包模塊管理工具。Webpack將項(xiàng)目中的一切資源都看做是模塊，模塊之間可以互相依賴，Webpack對它們做統(tǒng)一的管理，打包和發(fā)布，用于我們的項(xiàng)目構(gòu)建工作流中。

  • webpack主要特點(diǎn)
    1.同時(shí)支持CommonJS和AMD模塊。
    2.串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性，例如提供對ES6的支持。
    3.可以基于配置打包成多個(gè)文件，實(shí)現(xiàn)公共模塊或者按需加載。
    4.支持對CSS，圖片等資源進(jìn)行打包。
    5.開發(fā)時(shí)在內(nèi)存中完成打包，性能更快，完全可以支持開發(fā)過程的實(shí)時(shí)打包需求。
    6.對sourcemap有很好的支持，易于調(diào)試。

webpack.config.js 文件

webpack.config.js文件，所有跟webpack有關(guān)的工作，都在這個(gè)文件中進(jìn)行配置。

  • 先來看看這個(gè)文件長什么樣
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

let DEV = process.env.NODE_ENV === 'DEV'; //開發(fā)模式
let PROD = process.env.NODE_ENV === 'PROD'; //生成模式

let entry = PROD 
    ?   [
            './src/index.js'
        ] 
    :   [
            './src/index.js',
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/only-dev-server'
        ];

var plugins = PROD
    ? [
        new webpack.optimize.UglifyJsPlugin({
            comments: true,
            mangle: false,
            compress: {
                warnings: true
            }
        }),
        new ExtractTextPlugin('style.css')
    ]
    : [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            DEVELOPMENT: JSON.stringify(DEV),
            PRODUCTION: JSON.stringify(PROD)
        })
      ];

var cssIdentName = PROD ? '[hash:base64:10]' : '[path][name]-[local]-[hash:base64:24]';

var cssLoader = PROD
    ?       ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: 'css-loader?localIdentName=' + cssIdentName
    })
    :       ['style-loader', 'css-loader?localIdentName=' + cssIdentName];

//webpack配置文件項(xiàng)
module.exports = {
    devtool: "source-map",
    //入口文件
    entry: entry,
    //輸出打包的文件
    output: {
        //打包文件名
        filename: 'bundle.js',
        //bundle.js輸出路徑,是一個(gè)絕對路徑
        path: path.join(__dirname, 'dist'),
        //在html頁面中需要的導(dǎo)入資源的路徑
        publicPath: '/dist/'
    },
    plugins: plugins,
    module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                loader: 'babel-loader'
            },
            {
                test: /\.(jpg|gif|png)$/,
                exclude: '/node_modules/',
                // loader: 'file-loader'
                loader: 'url-loader?limit=512&name=[path][name].[ext]?[hash]'
            },
            {
                test: /\.css$/,
                exclude: '/node_modules/',
                loader: cssLoader
            }
        ]
    },
    resolve:{
        modules: [
            "node_modules",
            path.join(__dirname, "src")
        ],
        extensions: [".js", ".json", ".jsx", ".css", ".gif"],
    },
    devServer: {
        hot: true,
        publicPath: '/dist/',
        stats: {
            colors: true
        }
    },
    performance: {
        hints: false
    }
};

webpack.config.js也是一個(gè)標(biāo)準(zhǔn)的Commonjs模塊，其中包含module.exports這樣的標(biāo)志性關(guān)鍵詞。

  • 它的主要的配置參數(shù)有：
devtool：debug時(shí)輸出原文件可以方便debug
entry :  它是程序的入口文件
output: webpack的輸出打包文件配置
plugins：webpack的插件，包括第三方的和自帶的
module：單元模塊配置，在里面定義loaders，告訴webpack如果業(yè)務(wù)里加載了css或者圖片該怎樣去處理
resolve：extensions數(shù)組中用于配置程序可以自行補(bǔ)全哪些后綴。比如說我們要require一個(gè)common.js文件，添加了這個(gè)配置我們只要寫：require('common')就可以了
devServer：用于開發(fā)服務(wù)器配置
performance：配置webpack的通知提示

構(gòu)建項(xiàng)目環(huán)境順序

  • 確保安裝nodejs
  • 建議安裝IDE webstrom

新建空項(xiàng)目

新建空項(xiàng)目

在項(xiàng)目根目錄新建package.json文件

  • 在IDE控制臺中輸入 npm init
    npm init

    在項(xiàng)目根目錄中新建webpack.config.js

然后參展官網(wǎng)配置webpack.config.js 上面已經(jīng)有例子

接下來安裝依賴包

這個(gè)依賴包可以按需加載，不用非得全安裝下來

npm i babel-core@6.21.0 babel-loader@6.2.10 babel-preset-es2015@6.18.0 babel-preset-react@6.16.0 bootstrap@3.3.7 css-loader@0.26.1 extract-text-webpack-plugin@2.0.0-beta.4 file-loader@0.9.0 jquery@3.1.1 lodash@4.17.2 react@15.4.1 react-bootstrap@0.30.7 react-dom@15.4.1 react-hot-loader@1.3.1 style-loader@0.13.1 url-loader@0.5.7 webpack@2.1.0-beta.28 webpack-dev-server@2.1.0-beta.12 --save --only=dev

新建一些文件和文件夾（除.babelrc，可自定義）

mkdir dist （用于存放輸出好的文件）
mkdir src （存放項(xiàng)目文件）
touch .babelrc （babel的配置文件，用于把es6的語法轉(zhuǎn)譯成當(dāng)前瀏覽器識別的es5的語法，把react的jsx語法轉(zhuǎn)譯成js語法）
touch index.html（普通的入口文件）

.babelrc文件

{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-react-test</title>
    <link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="dist/style.css">-->
</head>
<body>
<div id="app">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/dist/bundle.js"></script>
</div>
</body>
</html>

package.json

{
  "name": "webpack-react-test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "build": "NODE_ENV=PROD webpack --progress --watch",
    "dev": "NODE_ENV=DEV webpack-dev-server"
  },
  "author": "zhangbo",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "jquery": "^3.1.1",
    "lodash": "^4.17.2",
    "react": "^15.4.1",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.1",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta.28",
    "webpack-dev-server": "^2.1.0-beta.12"
  }
}

新建index.js

import React from 'react';
import {render} from 'react-dom';

class HelloReact extends React.Component {
    render() {
        return(
            <div>Hello React!!!</div>
        );
    }
}

render(<HelloReact />, document.getElementById("app"));

if (module.hot) {
    module.hot.accept();
}

啟動服務(wù)器

根據(jù)package.json中對scripts的定義
在終端輸入 npm run dev 來啟動服務(wù)器
啟動webpack-dev-server
在瀏覽器中輸入訪問地址
原文件，debug
項(xiàng)目結(jié)構(gòu)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容