react webpack是什麼

react是一個用於建立使用者介面的JAVASCRIPT函式庫；而webpack是一個前端資源載入/打包工具，webpack將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則產生對應的靜態資源。

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

推薦：react影片教學

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是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！