React系列---Webpack環境搭建（一）手動搭建

React系列---Webpack環境搭建（一）手動搭建
React系列---Webpack環境搭建（二）不一樣環境不一樣配置
React系列---Webpack環境搭建（三）打包性能優化

工程初始化

確保已經安裝了node，npm包管理工具會隨node一塊兒安裝。

可用如下方式安裝依賴包：

# 安裝到全局環境
npm install 依賴包[@版本號] -g 
# 安裝到當前環境並添加到package.json的dependencies部分
npm install 依賴包[@版本號] --save
# 安裝到當前環境並添加到package.json的devDependencies部分
npm install 依賴包[@版本號] --save-dev

建立react-webpack-demo目錄並進入：

生成package.json

npm init --yes

安裝webpack

npm install webpack --save-dev

安裝webpack-dev-server

npm install webpack-dev-server --save-dev

webpack-dev-server是一個基於Express框架的Node.js服務器。它還提供了一個客戶端的運行環境，會被注入到頁面代碼中執行，並經過Socket.IO與服務器通訊。
服務器端的每次改動與從新構建都會被通知到頁面上。還提供瞭如模塊替換這樣強大的功能。

安裝Babel

安裝babel-core核心模塊

npm install babel-core --save-dev

安裝babel的ES6和React語法包

npm install babel-preset-es2015 babel-preset-react --save-dev

配置Babel

根目錄下配置.babelrc

{
    "presets": ["es2015", "react"]
}

安裝ESLint

安裝ESLint loader

npm install eslint@3.19.0 --save-dev

安裝ESLint的第三方配置規則eslint-config-airbnb

npm install eslint-config-airbnb --save-dev

eslint-config-airbnb須要如下3個插件支持：

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

配置ESLint

根目錄下配置.eslintrc.js

module.exports = {
  "parserOptions": {
    "ecmaVersion": 7, // ECMAScript版本，7爲ES7
    "sourceType": "module", //默認script，若是代碼是ECMAScript模塊，設置爲module
    "ecmaFeatures": { // 使用額外的語言特性
        "jsx": true // 啓用JSX
    }
  },
  // 指定腳本的運行環境。每種環境都有一組特定的預約義全局變量
  // 避免訪問未定義的環境變量而發出告警
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
  },
  // 腳本在執行期間訪問的額外的全局變量
  // 避免訪問未定義的環境變量而發出告警
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  // 繼承第三方校驗規則eslint-config-airbnb
  "extends": "airbnb",
  // eslint-config-airbnb包括瞭如下3個插件
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  // 定製本身的規則
  "rules": {
    "comma-dangle": ["error", "never"], // 要求或禁止末尾逗號：不容許逗號
    "indent": ["error", 4], // JavaScript代碼強制使用一致的縮進：4格縮進
  }
};

安裝webpack loader

Webpack有一個不可不說的優勢，它把全部的文件均可以當作模塊處理，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等，只有經過合適的loaders，它們均可以被當作模塊被處理。
Webpack 默認只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。

安裝eslint-loader整合eslint：

npm install eslint-loader --save-dev

安裝babel-loader整合babel：

npm install babel-loader --save-dev

安裝style-loader css-loader等，轉換對應類型文件：

npm install style-loader css-loader less-loader sass-loader file-loader url-loader --save-dev

css-loader 用於打包css文件
style-loader 用於將編譯完成的css插入html中
less-loader 是將less文件編譯成css
sass-loader 是將sass文件編譯成css
file-loader 用於打包文件
url-loadder 用於打包圖片

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。
url-loader是對file-loader的上層封裝。通常限制小圖片直接轉成 base64 能夠用 url-loader，其餘狀況都用 file-loader。

安裝webpack plugin

與loader專一於處理資源內容不一樣，plugin功能更廣更強大。plugin能夠實現那些loader實現不了或者不適合在loader實現的功能，好比自動生成項目的HTML頁面、向構建過程當中注入環境變量等。

安裝html-webpack-plugin

npm install html-webpack-plugin --save-dev

安裝uglifyjs-webpack-plugin，用於JS代碼壓縮

npm install uglifyjs-webpack-plugin --save-dev

配置webpack

根目錄配置webpack.config.js：

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports = {
    entry: {
        index: path.resolve(SRC_PATH, 'index.jsx')
    },
    output: {
        path: BUILD_PATH,
        filename: 'js/[name].[hash:5].js'
    },
    // 開啓dev source map
    devtool: 'eval-source-map',
    // 開啓 webpack dev server
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true
        //progress: true
    },
    resolve: {
        extensions: ['.js', '.jsx']
        //root: APP_PATH
    },
    module: {
        // 配置preLoaders, 將eslint添加進去
        loaders: [
            {
                test: /\.jsx?$/,
                loaders: ['eslint-loader'],
                include: SRC_PATH,
                enforce: 'pre'
            }, {
                test: /\.jsx?$/,
                loaders: ['babel-loader'],
                include: SRC_PATH,
                exclude: path.resolve(ROOT_PATH, 'node_modules')
            }
        ]
    },
    // 配置plugin
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"'
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
        }),
        new HtmlwebpackPlugin({
            title: 'react-webpack-demo',
            filename: 'index.html',
            template: path.resolve(SRC_PATH, 'templates', 'index.html'),
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                removeAttributeQuotes: true
            }
        })
    ]
};

上面的配置把app文件夾的app.jsx做爲入口，用配置好的babel-loader處理它，在Babel處理前先用ESLint檢查代碼格式，最後使用HtmlwebpackPlugin在build文件夾中生成處理後的HTML文件。咱們還添加了一個resolve的參數，把JSX擴展名添加進去，從而支持JS中import加載JSX擴展名的腳本。

安裝核心功能包

安裝React依賴包

npm install react react-dom --save

安裝react-redux依賴包

npm install redux  --save
npm install redux-actions  --save
npm install react-redux  --save

安裝react-router依賴包

npm install react-router  --save
npm install react-router-redux  --save

安裝redux調試工具包

npm install redux-devtools  --save-dev

建立項目入口模塊

根目錄下建立src目錄：

新建/src/index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';

function Index() {
    return (
      <div className="container">
        <h1>Hello React!</h1>
      </div>
    );
}

ReactDOM.render(<Index />, document.getElementById('root'));

export default Index;

建立渲染頁面

建立/scr/templates/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

運行程序

在package.json中添加自定義命令：

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --hot"
}

運行：

npm run dev

webpack-dev-server會新建一個基於Express的服務器，打開瀏覽器http://localhost:8080

開發中可能還依賴各類中間件和第三方工具。具體用到時再安裝吧。

代碼：https://github.com/zhutx/reac...

---

React系列---Webpack環境搭建（一）手動搭建
React系列---Webpack環境搭建（二）不一樣環境不一樣配置
React系列---Webpack環境搭建（三）打包性能優化