react.js webpack 新手教學,使用 ES6 完整介紹。
最近在編寫 react.js 時候,由於使用ES6,故引用 babel 來進行 compiler。
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script type="text/babel"></script>
然而這有個很大的缺點,就是為了compiler,會讓整個DOM render效率降低,
因此 webpack 就是這麼來著,webpack 為基於 node.js 環境底下執行,透過 npm 即可安裝,
專門將你寫好的 react.js 打包為一支檔案,真的快很多~
以下為安裝設定過程,本篇使用 ES6 作為範例。
初始化專案
過程為本專案的基本資訊,預設 Enter 到底即可,
完成後則會建立 package.json。
npm init
安裝 React.js
安裝 react、react.dom 兩個模組。
npm install react
npm install react-dom
安裝 Webpack
安裝 webpack、webpack-dev-server,
webpack-dev-server 為 debug 模式下所用的模組。
npm install webpack
npm install webpack-dev-server
錯誤ERR!
安裝時,若出現此畫面,更改 package.json 裡面的 name(專案名稱)即可。
安裝 Babel
安裝babel-loader、babel-core、babel-preset-es2015、babel-preset-react。
npm install babel-loader
npm install babel-core
npm install babel-preset-es2015
npm install babel-preset-react
編寫 React component
建立 apple.jsx,記得存為 jsx 檔案,若發現 syntax 顏色有點怪怪的,
在 sublime 中可安裝 HTML/CSS/JS Prettify。
可參考文章:Sublime【Package Control】 - HTML/CSS/JS Prettify - JSX
import React from 'react';
import ReactDOM from 'react-dom';
class Apple extends React.Component{
render(){
return <h1>This is an apple.</h1>;
}
}
ReactDOM.render(<Apple />,document.getElementById('fruit'));
建立一個 main.js,此檔案專門將所有 component 集合起來。
import Apple from './apple.jsx';
建立主文件 index.html。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<div id="fruit"></div>
</body>
</html>
接下來為重點,建立 webpack.config.js,此為設定 webpack 檔案打包來源及輸出等等。
- enrty:為專門 Import 所有 jsx 之檔案,即 component
- output:為指定輸出檔案,經過 webpack 打包後,將會產出 bundle.js
- module:query本篇使用 ES6(ECMAScript6)
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
修改 index.html,產出的 bundle.js 為我們要引用的檔案,故加入此檔案。
<script src="bundle.js"></script>
完成後我們開始打包吧~
webpack-dev-server 進行 debug 模式編譯,且處於 listening 監聽狀態。
正常為顯示:webpack:bundle is now VALID
webpack-dev-server --progress --colors
現在打開網址即可查看預覽結果:http://localhost:8080/webpack-dev-server/
進行檔案修改時,亦會監聽檔案進行打包。
停止 webpack-dev-server ,網頁上則會警示目前 lost connection。
debug 無誤後,我們可以安心正式產出 bundle.js 檔案。
webpack
打開 index.html 即可看到畫面~
想到要打一長串才可進行 webpack 監聽就會頭疼,如何加速或客製指令處理?
在 package.json 中,在 script 加入自訂指令以及實際運作指令即可:
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"author": "",
"license": "ISC"
}
要使用的時候直接輸入:
npm run build
npm run dev
以下為完整目錄結構:
- node_modules
- index.html
- bundle.js
- main.js
- webpack.config.js
- package.json
- apple.jsx
Multiple Component
相信大家在刻 component 時候,不可能只有一個,
要如何將多數檔案進行 webpack 打包是面臨的問題,以及如何產出於特定目錄。
以下為假設有兩個元件 c_apple.js、c_orange.js 要分別進行打包,
在 webpack.config.js 中,我們修改來源:
- bundleApple、bundleOrage :即為產出的 bundle 檔名
- path.resolve(_dirname,'app/c_apple.js'):為指定 app 目錄中的 c_apple.js 檔案
entry: {
bundleApple: [path.resolve(__dirname, 'app/c_apple.js')],
bundleOrange: [path.resolve(__dirname, 'app/c_orange.js')]
}
在 output 部分則為:
- path.resolve(_dirname),'build'):產出目錄指定於 build
- '[name].js':依據 entry 中的名稱命名(bundleApple.js、bundleOrage.js)
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
}
調整後目錄結構為:
- 新建 app 資料夾,存放所有 component
- 新建 build 資料夾,將 webpack 打包後的檔案放置於此
- 記得調整 index.html 引用 bundle 的 src
- node_modules
- app - apple.jsx
- orange.jsx
- c_apple.js
- c_orange.js
- build - bundleApple.js
- bundleOrange.js
- index.html
- webpack.config.js
- package.json
後記
簡單來說,寫 react.js 真心建議使用 webpack,效率!
有勘誤之處,不吝指教。ob'_'ov