# **構建Node + WebPack + React 熱加載開發環境** - ## 約定 > 此教程包安裝均使用yarn進行安裝與管理：[yarn安裝方法](https://yarnpkg.com/docs/install/) >如果包只在生成環境下需要請 使用命令 ```yarn add package_name --dev``` - ## 初始化環境 >  - ## 環境構建思路 > 1.npm start 命令執行 2.webpack-dashboard 進行監聽webpack的運行狀態 3.cross-env進行不同平臺下命令兼容執行相關環境變量 4.node調用進行啟動express靜態容器，解析devServer.js 5.express靜態容器，加載webpack服務webpack-dev-middleware 6.express靜態容器，加載webpack熱加載中間件服務webpack-hot-middleware 7.通過定義公共入口webpack/config.js，根據環境變量加載不同環境下的webpack配置文件 8.必須安裝webpack、webpack-dev-server包 - ## 正式構建 - ### 根目錄 創建webpack目錄 > 目錄內新建三個文件：config.js、production.js、development.js - ### 根目錄 創建devServer.js - ### 編輯package.json > 新增 scripts項 ，如下： 這里我改變了下webpack-dashboard的socket端口為3032 ~~~ "scripts": { "start": "webpack-dashboard -p 3032 cross-env NODE_ENV=development node devServer.js" }, ~~~ > 現在我們可以到當前目錄下npm start了可以看到此界面，當然此時是沒有任何信息顯示的 空空如也  - ### package.json目前內容（把webpack + babel + react 相關的需要用到的包都yarn好了） ~~~ { "name": "NodeCMS", "version": "1.0.0", "description": "NodeCMS is a easy and fast WebSite Manager System", "main": "index.js", "repository": "https://github.com/624508914/node_cms.git", "author": "楊圓建", "license": "MIT", "scripts": { "start": "webpack-dashboard -p 3032 cross-env NODE_ENV=development node devServer.js" }, "devDependencies": { "babel": "^6.5.2", "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-plugin-react-transform": "^2.0.2", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.22.0", "babel-preset-react-hmre": "^1.1.1", "babel-preset-stage-0": "^6.22.0", "cross-env": "^3.1.4", "html-webpack-plugin": "^2.24.1", "react-tools": "^0.13.3", "react-transform": "^0.0.3", "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "redbox-react": "^1.3.3", "webpack": "^2.2.1", "webpack-dashboard": "^0.3.0", "webpack-dev-middleware": "^1.10.0", "webpack-dev-server": "^2.3.0", "webpack-hot-middleware": "^2.16.1" } } ~~~ - ### 編輯devServer.js > 代碼如下： ~~~ const express = require('express'); const webpack = require('webpack'); const webpackMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpackHotMiddleware'); const config = require('./webpack/config.js'); const app = express(); // 解析webpack配置 const compiler = webpack(config); const port = process.env.NODE_PORT || 5000; // 定義express的靜態文件加載目錄 app.use(express.static(__dirname+'/dist')); // 使用webpack中間件 app.use(webpackMiddleware(compiler)); // 使用webpack熱加載中間件 app.use(webpackHotMiddleware(compiler)); // 啟動express靜態服務器 app.listen(port,function(err){ if(err){ console.log(err); return false; } console.log(`Listening at http://localhost:${port}`); }); ~~~ - ### 編輯config.js > 代碼如下： ~~~ const path = require('path'); // 獲取環境 const ENV = process.env.NODE_ENV || 'development'; // 暴露配置文件 module.exports = require(`./${ENV}.js`); ~~~