前言
webpack和react搭配開發(fā)非常棒可以說是最佳的搭檔了，包在安裝過程中開發(fā)用的使用npm install --save-dev <name>安裝，生產(chǎn)環(huán)境需要的包用npm install --save <name>安裝，國內(nèi)由于網(wǎng)絡(luò)環(huán)境建設(shè)使用淘寶的鏡像源cnpm，本節(jié)使用的包列表：
- babel一系列編譯轉(zhuǎn)換工具:
babel-core babel-cli babel-loader babel-preset-es2015 babel-preset-react - React庫:
react react-dom
目錄結(jié)構(gòu)
|-React-redux-example
|-node_modules/ #包文件
|-public/ #靜態(tài)目錄
|-assets/ #靜態(tài)資源生成目錄
|-index.html
|-src/ #開發(fā)目錄
|-app.js #client入口文件
|-config/ #配置目錄
|-webpack.dev.js #webpack開發(fā)配置文件
|-package.json
|-README.md
|-.gitignore #git的忽略列表
config/webpack.dev.js
var path = require('path')
//配置文件是放在config的目錄下的，所有這里定義了一個項目的根目錄變量
var projectRootPath = path.resolve(__dirname,'..')
var config = {
entry: path.resolve(projectRootPath,'src/app.js'),
output:{
path: path.resolve(projectRootPath,'public','assets'),
filename: 'bundle.js',
publicPath: '/assets/'
},
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['react','es2015']
}
}
]
}
}
module.exports=config;
entry:要打包文件
output:打包文件位置
module:打包要加載的模塊--presets用來解析ES6,React,ES7語法
publicPath:指定公共URL地址在瀏覽器輸出文件的引用
package.json
在scripts添加webpack的編譯命令，由于我的webpack配置文件，放在config目錄中，所以在編譯時要指定--config ./config/webpack.dev.js
"scripts": {
"build": "webpack --verbose --color --display-error-details --config ./config/webpack.dev.js "
}
src/app.js
這里我們用最少的代碼測試一下我們的webpack配置有沒有問題
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello</h1>,document.getElementById('app'))
public/index.html
因為沒有啟動web服務(wù)器，所以<script src="./assets/bundle.js"></script>用的是文件的相對地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React-redux-example</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="./assets/bundle.js"></script>
</html>
build
完成上面所有步驟后，npm run build會看到在public/assets/目錄中生成了一個bundle.js文件，在瀏覽器中打開index.html看到Hello,我們的webpack基本配置就完成了，如圖
NEXT
webpack與express開發(fā)服務(wù)器的配置，hotreplace（熱替換）的配置
