react和webpack
- webpack介紹
- webpack常用loader
- webpack dev server
webpack介紹
webpack是一個前端資源打包工具。
首先,建立一個目錄,在當前目錄下執行:
npm init
生成package.json檔案。
其次安裝專案中需要引入的react和webpack:
npm install react --save
–save表示將依賴直接同步到package.json檔案中,dependencies…相關即為安裝好的依賴,下載的依賴放在node-module資料夾下。由於很多從github上下載的專案都是沒有node_module資料夾的。這時需要手動執行以下:
npm install
這個指令表示根據package.json檔案來下載依賴。
接下來編寫webpack的配置檔案:webpack.config.js為webpack的預設配置檔名。其內容為:
module.exports= {
entry: './app/index.js',
output:{
path: './dist',
filename:'bundle.js'
}
}
entry表示入口,output為輸出。為此在專案目錄下建立dist資料夾和app資料夾,並在app目錄下建一個index.js檔案,程式碼如下:
var react=require ('react');
console.log(react.version);
上述程式碼輸出了react的版本號。
程式碼都寫完了,接下來在專案路徑下執行:
webpack
即可對程式碼打包,生成一個bundle.js檔案,最後建立一個index.html檔案,來呼叫這個生成的打包檔案。程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title >
</head>
<body>
<div id="root">hello world</div>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
最後在瀏覽器來輸入地址來檢視,果然能看到日誌資訊。
file:///G:/react.js/react-music-player/index.html
webpack常用loader
常用loader如babel-loader,將ES6等高版本語法轉成ES5。還有其他的css-loader,less-loader等。
首先對webpack.config.js檔案進行修改,新增loader。修改後的程式碼如下:
module.exports= {
entry: './app/index.js',
output:{
path: './dist',
filename:'bundle.js'
},
module: {
resolve:{
extensions:['','.js','.json']
},
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets:['react','es2015']
}
},
{
test: /\.json?$/,
loader: 'json'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.less/,
loader: 'style-loader!css-loader!less-loader'
}
]
}
}
上述程式碼中,test屬性是進行匹配的正常表示式,第一個loader就是針對js檔案進行版本更換的babel-loader,exclude表示不需要處理的目錄
後面有針對css的less。less是css的一個新框架。
接下來我們修改index.js檔案,使用ES6的import語法以及less形式,程式碼如下:
import React from 'react';
import './index.less';
console.log(react.version);
index.less程式碼如下:
body{
#root {
font-size: 30px;
}
}
程式碼修改完後重新打包:webpack
在瀏覽器中開啟index.html頁面發現字型大小的確發生變化了,說明生效了。
webpack dev server
webpack是一個小型的node伺服器,它為通過webpack打包生成的資原始檔提供web服務。通過webpack dev server來搭建開發環境,實現:
1. 搭建本地伺服器。
2. 自動重新整理。
使用webpack dev server就不需要像之前一樣每次都重新編譯,並且瀏覽器的地址是本地生成的靜態檔案地址,並且每次都手動重新整理頁面。