很多人剛學習react的時候，往往因為繁瑣的配置而頭疼，這裡我將手把手教大家怎麼用webpack配置react和redux的環境，這篇教程包括前端react和後臺node整個網站的環境配置，對node沒興趣的可以只看這篇。
我把所有代碼都放到了github上面供參考：webpack-react-express環境配置
1. 什麼是webpack？
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
2. 創建項目
先創建項目文件夾，我這裡命名為blog，當成一個博客項目，當然你也可以命名成其他的。
mkdir blog && cd blog
接著用npm初始化這個項目。（使用npm之前需要先安裝node.js和npm）
npm init
image
這些內容可以enter鍵全部跳過，結束後目錄裡面會出現一個package.json文件，這個文件裡面是我們項目的信息。
image
之後我們再創建兩個文件夾，分別放前端和後臺的代碼，這兩部分我會分開講。
mkdir client && mkdir server
3. client
由於我們使用的是es2015和react這些語法，所以需要用babel來編譯，命令行進入到client目錄，並且創建兩個目錄分別存放編譯前的代碼和編譯後的代碼。
mkdir src && mkdir dist
我們會把js和css單獨打包出來，所以在dist目錄下面創建js和css目錄以及index.html入口文件，同時在src目錄下面創建幾個目錄（之後的創建命令行就省略了，你也可以直接右鍵創建文件夾）。
這是最新的項目結構：
+ blog
+ client
+ dist // 編譯並打包後的文件
+ images
+ js
+ css
+ index.html // 前端入口文件
+ src
+ assets // 圖片等靜態資源
+ components // 一些公用組件
+ form.jsx
+ form.scss
+ button.jsx
+ form.scss
+ layouts // 一些佈局組件（包括jsx和sass文件），比如導航欄、側邊欄等等
+ sidebar.jsx
+ sidebar.scss
+ nav.jsx
+ nav.scss
+ containers // 整個頁面
+ pageA.jsx
+ pageA.scss
+ pageB.jsx
+ pageB.scss
+ redux // 和redux有關的文件
+ actions // action文件
+ reducers // reducer文件
+ rootReducer.js
+ store // 初始化的狀態
+ routes // 路由相關文件
+ routes.js
+ main.js // 整個前端項目的入口文件
+ server // 服務端文件
+ package.json
這時候安裝一下項目依賴的框架和庫。
npm install react react-dom redux react-redux react-router antd css-loader style-loader node-sass sass-loader file-loader url-loader autoprefixer postcss-loader --save
這裡是index.html裡面的內容：
image
webpack
安裝
如果npm速度太慢，建議使用淘寶的cnpm，g和save的區別建議去了解一下。
npm install webpack -g
npm install extract-text-webpack-plugin --save-dev // 將css單獨打包的插件
npm install path --save-dev // 和路徑
配置文件
現在我們在blog目錄創建一個webpack.config.js文件。（webpack使用commonJS的語法）
var webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: { // 打包入口
index: "./client/src/main.js",
vendor: [ // 將react和react-dom這些單獨打包出來，減小打包文件體積
"react",
"react-dom"
]
},
output: { // 打包目標路徑
path: "./client/dist",
filename: "js/[name].js"
},
resolve: {
"extentions": ["", "js"]//當requrie的模塊找不到時，添加這些後綴
}
}
module.exports = config;
babel
Babel 是一個 JavaScript 編譯器，可以將es6、jsx等編譯為瀏覽器可以識別的語法。
安裝babel以及相關插件
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-1 babel-plugin-import babel-cli --save-dev
使用webpack loader加載器
繼續修改webpack.config.js裡面的內容，給config對象加一個module屬性。
var config = {
module: {
loaders: [{ // babel loader
test: /\.js|.jsx$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ['es2015', 'react', 'state-1']
}
}, {
test: /\.(scss|sass|css)$/, // 打包sass和css文件
loader: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader: "css-loader!postcss-loader!sass-loader"})
}, {
test: /\.(png|jpg|jpng|eot|ttf)$/, // 打包圖片和字體文件
loader: 'url-loader?limit=8192&name=images/[name].[ext]'
}]
}
}
test一般是一段正則，用來匹配對應類型的文件。
exclude是應該被忽略的文件，這裡指定了node_modules。
query則有兩種寫法，一種是我們上面寫的那種，另一種是放到loader後，比如：
loader: 'babel-loader?presets[]=es2015&&presets[]=react&&presets[]=state-1'
不過相比這兩種方式，我更建議將這些放到一個.babelrc文件裡面。
在blog目錄下面創建一個.babelrc文件，內容如下：
{
"presets": ["es2015", "react", "stage-1"],
"plugins": [ // 這個是配置ant design的按需加載的環境
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
我們接著完善webpack.config.js，在config對象裡面添加一個plugins屬性，這個是用來配置插件的。
var config = {
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "js/vendor.bundle.js"), //這是之前單獨打包出來的react、react-dom等文件
new ExtractTextPlugin("css/index.css"), // 將所有sass/css文件打包成一個index.css文件
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
new webpack.optimize.UglifyJsPlugin({ // 壓縮打包後的代碼
compress: {
warnings: false
}
})
]
到這裡，我們的webpack環境算是全部配置完了，我們可以在main.js裡面寫一段代碼進行測試。
import React from 'react'
import { render } from 'react-dom'
render(
hello, world
,
document.getElementById("app")
)
然後在命令行裡面輸入webpack，出現下面這些就是成功了，這時dist/js下面會出現index.js和vendor.bundle.js兩個文件。
image
接著我們趕緊打開index.html文件來看看效果。（千萬不要忘了在index.html裡面引入index.js和vendor.bundle.js）
image
事實證明了前端水實在太深了，只是寫一個hello world都要配置這麼多東西，安裝這麼多框架和庫，希望大家不要放棄，繼續愛前端。
閱讀更多 前端嫣然呀呀呀 的文章
