手把手教你webpack、react和node.js環境配置（上篇）

不少人剛學習react的時候，每每由於繁瑣的配置而頭疼，這裏我將手把手教你們怎麼用webpack配置react和redux的環境，這篇教程包括前端react和後臺node整個網站的環境配置，對node沒興趣的能夠只看這篇。

這裏是下篇連接：手把手教你webpack、react和node.js環境配置（下篇）

我把全部代碼都放到了github上面供參考：webpack-react-express環境配置

更詳細的一個完整案例：react-redux製做的我的簡歷

1. 什麼是webpack？

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

2. 建立項目

先建立項目文件夾，我這裏命名爲blog，當成一個博客項目，固然你也能夠命名成其餘的。

mkdir blog && cd blog

接着用npm初始化這個項目。（使用npm以前須要先安裝node.js和npm）

npm init

這些內容能夠enter鍵所有跳過，結束後目錄裏面會出現一個package.json文件，這個文件裏面是咱們項目的信息。

以後咱們再建立兩個文件夾，分別放前端和後臺的代碼，這兩部分我會分開講。

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裏面的內容：

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 編譯器，能夠將es六、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("style-loader", "css-loader!sass-loader!postcss-loader", {
                publicPath: '../' // 若是不須要打包成一個css，能夠直接{test: /\.css$/,loaders: ['style', 'css'],}
            })
            }, {
                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能夠直接去掉plugins屬性
        [
            "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(
    <h1>hello, world</h1>,
    document.getElementById("app")
)

而後在命令行裏面輸入webpack，出現下面這些就是成功了，這時dist/js下面會出現index.js和vendor.bundle.js兩個文件。

接着咱們趕忙打開index.html文件來看看效果。（千萬不要忘了在index.html裏面引入index.js和vendor.bundle.js）

事實證實了前端水實在太深了，只是寫一個hello world都要配置這麼多東西，安裝這麼多框架和庫，但願你們不要放棄，繼續愛前端。