webpack+react+es2015輕鬆環境搭建，配置，運行項目

時間 2019-11-11

標籤 webpack+react+es2015 webpack react 輕鬆環境搭建配置運行項目欄目 React 简体版

原文原文鏈接

簡介：html

webpack：是近期最火的一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。前端

react：如今最熱門的前端框架，毫無疑問是 React 。node

es2015：ECMAScript 6。react

以上是她們的基本定義，想一想能將她們結合在一塊兒開發咱們的項目是多麼的激動人心啊。固然在正式開發以前咱們也有不少準備工做須要作好，這也多是對新手最棘手的問題。下面咱們就直接進入正題吧。webpack

環境搭建：nginx

首選咱們需下載安裝Node.js,下載地址：https://nodejs.org/en/ （注意：爲了能支持es2015請下載4.0以上版本）git
安裝了node以後咱們還須要npm也就是包管理器，固然新的node已經集成了npm的。因此此步驟能夠跳過了es6
有了npm後，win+r而後輸入cmd打開，而後輸入命令：github
```
npm install webpack -g
```
執行命令後個人webpack就全局安裝好了，這裏提醒一下，在項目文件中咱們還須要將webpack寫入package.json(局部安裝)web

項目建立：

在D盤建立咱們的項目文件「reactPro」，目錄結構以下：

在cmd中定位項目地址，執行命令：
```
cd D:\reactPro
```
```
D:
```
定位完成後，咱們利用npm生成package.json文件，執行命令：
```
npm init
```
上面命令執行完成以後咱們就生成了一個node項目，接下來就能夠安裝咱們的node模塊了

首選安裝webpack，執行命令：
```
npm install webpack --save-dev
```
而後安裝webpack須要的加載器，執行命令：

npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev

加載器這裏應該是很重要的一步了，若是沒有這幾個加載器咱們的jsx語法，和es2015語法就會報錯（ps：網上不少教程都沒有重點說起這幾個加載器）
好了有了這幾個重要的加載器來編譯咱們的代碼以後，咱們還要安裝react模塊，這樣才能開發咱們react應用。安裝react輸入以下命令：
```
npm install react react-dom --save-dev
```

文件配置&運行：

前面咱們已經建立好了咱們的項目文件也安裝完了必要的模塊，環境已經搭建好了，如今就是萬事具有隻欠東風啦。
接下來，咱們開始配置webpack開發的webpack.config.js文件配置，經過配置這個文件咱們告訴webpack如何編譯咱們的代碼，話很少說直接上代碼：

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }

            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

你們可能發現了‘webpack/hot/dev-server‘這句話，沒錯這就是咱們的webpack-dev-server，她容許咱們能夠把本地項目跑在像nginx那樣的web服務器上，更重要的是咱們能夠在package.json文件內定義scripts，同時修改webpack的配置文件來達到相似BrowserSync（即文件修改能被監聽，並自動刷新瀏覽器）的效果！
安裝webpack-dev-server執行：

npm install webpack-dev-server --save-dev

在package.json文件中爲scripts添加：

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

最後咱們的package.json代碼是這樣的：

{
  "name": "reactpro1",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "babel-node tools/run bundle",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "jx",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react": "^15.0.2",
    "react-dom": "^15.1.0",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  },
  "description": ""
}

這裏有一點提醒你們，package.json中name不能跟咱們的模塊和項目文件目錄同名
index.html變成這樣:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>

最後咱們這樣執行（ps:這一步能夠先跳過，寫完咱們的項目代碼後再來執行）：
```
npm run dev
```

react&es2015代碼編寫：

全部東西都齊全了，如今咱們就能夠開始咱們的愉悅的代碼編寫了
根據webpack.config.js的配置結合咱們的文件目錄結構，首先是main.js:

let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/productBox.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

這裏的let就是es2015的東西了，關於更多的如class，module之類的語法能夠去這個網站學習，地址：http://es6.ruanyifeng.com/#README
在main.js裏咱們引入了'./components/productBox.js'這個模塊，productBox.js代碼以下：

var React = require('react');
var ProductBox;
ProductBox = React.createClass({
    render: function () {
        return (
            <div className="productBox">
                hello react&es2015&webpack!
            </div>
        );
    }
});

module.exports = ProductBox;

到這裏，簡單的功能代碼就完成了，當運行項目後根據webpack.config.js的配置回來build目錄下生成bundlie.js文件，咱們只須要在build目錄下的index.html文件中引入bundle.js就完成咱們的整個項目測試代碼了.index.html以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>