react webpack的作用是什么

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

react是一個用于構建用戶界面的JAVASCRIPT庫；而webpack是一個前端資源加載/打包工具，webpack將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

本教程操作環境：windows7系統、webpack3.0&&react16.4.0版本、Dell G3電腦。

React 是一個用于構建用戶界面的 JAVASCRIPT 庫。

React 主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。

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

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

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

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

Webpack 配置 React 開發環境

安裝 Webpack：npm install -g webpack

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

假設我們在當前工程目錄有一個入口文件 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 了。

監聽編譯: webpack -d --watch

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