使用webpack 手動建立新react專案
雖然，react官方給的建立新專案的方式很簡單。直接create-react-app my-app 就能自動生成一個react專案，當然如果你用這種方式遇到npm 4048 的錯誤，恭喜中獎了。不得不說用win搞開發有點痛苦，各種問題。4048的錯誤解決方案是建立一個新使用者，開發各種許可權。4048就是許可權的問題。為啥要手動創新呢，因為還需要用到各種外掛和配置，所以，我就總結一下，以作記錄。
一：建立一個新的專案資料夾，在新資料夾使用shift + 右鍵 選擇在此處開啟shell視窗，執行命令：npm init
初始化時有提示設定，基本上直接回車就全部解決了，建立完以後資料夾多一個package.json，說明建立成功。
二：先安裝4個一個包，執行命令：npm install --save react react-dom babelify babel-preset-react
安裝完成後，在package.json檢視一下是否成功。如圖
三：繼續安裝依賴：執行命令: npm install --save babel-preset-es2015
也就是對es2015的支援外掛。
四：手動建立一個inex.html 一個src資料夾，一個webpack.config.js 在src資料夾建立js資料夾在這裡建立一個index.js.
index.html 的內容：
webpack.config.js 的內容如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>my react webpack</title> </head> <body> <div id="root">555</div> <script type="text/javascript" src="./src/bundle.js"></script> </body> </html>
index.js 的內容如下：var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: __dirname, entry: "./src/js/index.js", module: { loaders: [ { test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } } ] }, output: { path: __dirname, filename: "./src/bundle.js" } };
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<div>
<h1>Hello, world!005555222</h1>
</div>,
document.getElementById('root')
);執行完記得到pack.json 裡面檢視一下。
六：在專案裡面安裝webpack 和server :執行命令： npm install --save webpack 和 npm install --save webpack-dev-server . 這兩個命令執行完後再執行一個：npm install --save babel-loader
七：執行命令：webpack 編譯完成後會在src資料夾多一個bundle.js 再執行一個熱載入：webpack --watch
這就是隻要你的文件傳送變化，webpack就會重新編譯，瀏覽器就會自動重新整理了。
八：在專案文件裡面再開啟一個shell視窗，不要關閉上一個執行了熱載入的命令視窗。
在新shell執行命令：webpack-dev-server 成功以後看到這個
OK 就這樣建立完了。雖然麻煩，但是，自己就可以單獨配置各種外掛了，比如css模組化，等。。。