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

前端攻略發表於2018-11-27
WebReactNode.js

很多人剛學習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
複製程式碼


這些內容可以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
    　　}//歡迎加入全棧開發交流圈一起學習交流：582735936
  　　]//面向1-3年前端人員
　　}   //幫助突破技術瓶頸，提升思維能力
         + 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(
    <h1>hello, world</h1>,
    document.getElementById("app")
)
複製程式碼

然後在命令列裡面輸入webpack，出現下面這些就是成功了，這時dist/js下面會出現index.js和vendor.bundle.js兩個檔案。

image

接著我們趕緊開啟index.html檔案來看看效果。（千萬不要忘了在index.html裡面引入index.js和vendor.bundle.js）


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


相關文章