首頁  >  文章  >  web前端  >  react webpack是什麼

react webpack是什麼

藏色散人
藏色散人原創
2021-01-12 10:23:452683瀏覽

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

react 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn