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

很多人剛學習react的時候，往往因為繁瑣的配置而頭疼，這里我將手把手教大家怎么用webpack配置react和redux的環境，這篇教程包括前端react和后台node整個網站的環境配置，對node沒興趣的可以只看這篇。

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

我把所有代碼都放到了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

這些內容可以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 編譯器，可以將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( <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都要配置這么多東西，安裝這么多框架和庫，希望大家不要放棄，繼續愛前端。