React+webpack開發環境搭建+埠修改
阿新 • • 發佈：2019-01-06
1）.新建mynew-react-web資料夾;
2）.cd mynew-react-web;
3）.npm init，此時會有一個package.json檔案；
安裝包依賴:
4）.npm install webpack webpack-dev-server --save-dev;
5）.npm install babel-core babel-loader --save-dev;
6）.npm install babel-preset-es2015 babel-preset-react --save-dev;
7）.type nul>.babelrc,新建.babelrc檔案;
{
"presets":["es2015","react"]
}8）.npm install babel-preset-es2015 babel-preset-react --save-dev;
9）.npm install htm-webpack-plugin --save-dev;
9）.npm install htm-webpack-plugin --save-dev;
專案目錄：
webpack.config.js檔案內容
var path = require('path');
var webpack = require('webpack');
var package.json檔案內容
{
"name": "mynew-react-web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --hot"
},
"author": "lyn",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^4.17.0",
"eslint-loader": "^1.9.0",
"html-webpack-plugin": "^2.30.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^2.7.0",
"webpack-dev-server": "^2.1.0-beta.10"
},
"dependencies": {}
}app.jsx檔案內容
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h1>hello world!</h1>
</div>
)
}
};
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />,app);index.html檔案內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Demo</title>
</head>
<body>
</body>
</html>此時：npm run dev之後
埠修改到8181：
package.json中改為
