配置react+nodejs+webpack^3.11.0
阿新 • • 發佈:2019-01-09
1.首先給自己電腦配置安裝nodejs環境和npm包管理
在cmd輸入命令node -v可檢視nodejs版本,最新版本nodejs自帶npm包管理,所以不需要單獨安裝npm。如下圖:
2.新建專案
在工作盤中(我的是D盤)新建專案資料夾(舉例FirstDemo),使用webstrom開啟並在控制檯中輸入npm init命令初始化一個package.json檔案,如下圖3.載入node-module
在控制檯中輸入npm install webpack webpack-dev-server babel --save-dev命令為專案載入webpack配置檔案,如下圖
接下來使用同種方法npm install 下面的包"devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.9", "eslint": "^4.17.0", "eslint-plugin-react": "^7.6.1", "file-loader": "^1.1.6", "jquery": "^3.3.1", "less-loader": "^4.0.5", "react": "^16.2.0", "react-dom": "^16.2.0", "react-hot-loader": "^3.1.3", "style-loader": "^0.20.1", "url-loader": "^0.6.2", "webpack": "^3.11.0", "webpack-dev-server": "^2.11.1" }
4.配置webpack(此版本為3.11.08)
新建一個webpack.config.js的檔案,在檔案裡面新增如下資訊/** * * */ 'use strict'; var path = |
extensions: [ '*', '.js', '.json', '.less']
}將extensions中第一個空字元改為*號;
5.新建.babelrc的檔案,裡面的內容如下
{ "presets": ["es2015", "react"] } |
6.新建server.js的檔案,裡面的內容如下
7.在控制檯輸入node server.js命令,執行專案。如下圖在瀏覽器位址列中輸入http://localhost:3000/ |