這篇文章給大家介紹react webpack的作用是什么，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、平陸網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城系統(tǒng)網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為平陸等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

react是一個用于構(gòu)建用戶界面的JAVASCRIPT庫；而webpack是一個前端資源加載/打包工具，webpack將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。

本教程操作環(huán)境：windows7系統(tǒng)、webpack3.0&&react16.4.0版本、Dell G3電腦。

React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。

React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。

React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。

Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。

Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發(fā)缺乏的模塊化開發(fā)方式，將各種靜態(tài)資源視為模塊，并從它生成優(yōu)化過的代碼。 Webpack 可以從終端、或是更改 webpack.config.js 來設(shè)置各項功能。 要使用 Webpack 前須先安裝 Node.js。

webpack 的主要目標(biāo)是將 JavaScript 文件打包在一起，打包后的文件用于在瀏覽器中使用，但它也能夠勝任轉(zhuǎn)換(transform)、打包(bundle)或包裹(package)任何資源(resource or asset)。

Webpack 配置 React 開發(fā)環(huán)境

安裝 Webpack：npm install -g webpack

Webpack 使用一個名為 webpack.config.js 的配置文件，要編譯 JSX，先安裝對應(yīng)的 loader: npm install babel-loader --save-dev

假設(shè)我們在當(dāng)前工程目錄有一個入口文件 entry.js，React 組件放置在一個 components/ 目錄下，組件被 entry.js 引用，要使用 entry.js，我們把這個文件指定輸出到 dist/bundle.js，Webpack 配置如下：

var path = require('path');module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

resolve 指定可以被 import 的文件后綴。比如 Hello.jsx 這樣的文件就可以直接用 import Hello from 'Hello' 引用。

loaders 指定 babel-loader 編譯后綴名為 .js 或者 .jsx 的文件，這樣你就可以在這兩種類型的文件中自由使用 JSX 和 ES6 了。

監(jiān)聽編譯: webpack -d --watch

關(guān)于react webpack的作用是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。