React+webpack開發環境搭建+連接埠修改

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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;

項目目錄：

webpack.config.js檔案內容

var path = require('path');var webpack = require('webpack');var HtmlwebpackPlugin = require('html-webpack-plugin');var ROOT_PATH = path.resolve(__dirname);var APP_PATH = path.resolve(ROOT_PATH,'app');var BUILD_PATH = path.resolve(ROOT_PATH,'build');module.exports = {    entry:{        app:path.resolve(APP_PATH,'app.jsx')    },    output:{        path:BUILD_PATH,        filename:'bundle.js'    },    devtool:'eval-source-map',    devServer:{        historyApiFallback:true,        hot:true,        inline:true,        progress:true    },    module:{        loaders:[{            test:/\.jsx?$/,            loaders:['babel-loader'],            include:APP_PATH        }],    },    plugins:[        new HtmlwebpackPlugin({            title:'My first react'        })    ]}

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中改為

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More