(24/24) webpack小案例--本身動手用webpack構建一個React的開發環境

時間 2019-12-05

標籤 webpack 案例本身動手構建一個 react 開發環境欄目 React 简体版

原文原文鏈接

經過前面的學習，對webpack有了更深的認識，故此節咱們就利用前面相關知識本身動手用webpack構建一個React的開發環境，就算是一個小案例吧。html

注：此處使用的開發工具是Webstorm。node

1.安裝webpack

1.1 新建文件夾

在安裝webpack以前，咱們先創建一個文件夾,並利用開發工具webstorm打開剛纔新建的文件夾（或者新建項目，其項目目錄選擇剛纔新建的文件夾），而後使用webstorm終端初始化webpack項目，命令以下：react

npm  init -y

-y:表示默認初始化全部選項。webpack

初始化成功後能夠在項目根目錄下看到package.json文件。es6

1.2 安裝webpack

package.json文件創建好之後，開始安裝webpack，一樣是在webstorm終端輸入安裝命令（可使用npm安裝也可使用cnpm安裝）：web

npm install --save-dev webpack@3.8.1

--save-dev：安裝到該項目目錄中。 npm

注意：此處爲了兼容，webpack使用3.8.1版本。json

安裝好後，則會在package.json裏看到當前安裝的webapck版本號。瀏覽器

2.配置webpack.config.js

在項目根目錄創建webpack.config.js文件，這個文件是進行webpack配置的，先創建基本的入口和出口文件。服務器

2.1 配置

var path =require('path');
module.exports = {
    //入口文件
    entry:'./app/index.js',
    //出口文件
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    }
}

2.2 根據結構修改項目目錄

文件配置好後，咱們要根據文件的結構改造咱們的項目目錄，咱們在根目錄下新建app和dist文件夾，而後進入app文件夾，新建一個index.js文件。

3. 新建index.html文件

在根目錄新建index.html文件，並引入webpack設置中的出口文件，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack react案例</title>
</head>
<body>

</body>
<!--引入出口文件-->
<script src="./temp/index.js"></script>
</html>

4. 增長打包命令並測試配置是否成功

4.1 增長命令

打開package.json文件，在scripts屬性中加入build命令。

"scripts": {
    "build": "webpack"
  },

4.2 測試配置

4.2.1 測試代碼

操做爲在入口文件中寫入部分代碼，並進行打包測試：

app/index.js文件：

function component(){
    var element = document.createElement('div');
    element.innerHTML = ('Hello webpack react');
    return element;
}
document.body.appendChild(component());

4.2.2 打包操做

在終端中輸入npm run build進行打包，若是沒有出現錯誤，手動在瀏覽器中打開index.html,出現如下效果說明配置成功。

5. 開發服務器配置

到該步咱們還缺乏一個實時更新的服務，咱們開始配置：

5.1 插件安裝

此處爲了兼容使用指定安裝方式。安裝的版本爲2.9.7。

npm install --save-dev webpack-dev-server@2.9.7

5.2 配置webpack.config.js文件

devServer:{
    contentBase:'./',
    host:'localhost',
    compress:true,//啓動壓縮
    port:1818
}

5.3 新增命令

配置好後再packeage.json裏增長一個scripts命令，咱們起名叫server。

"scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open"
  },

–open表示是直接打開瀏覽器。

5.4 啓動服務

在終端執行npm run server 命令啓動服務。

npm run server

瀏覽器自動打開，效果與前面手動結果一致。

6.配置自動刷新瀏覽器

到此咱們修改代碼時，瀏覽器不能自動刷新，沒法實時呈現咱們編寫的代碼結果，只能重複新打包才能生效。

解決方法爲：使公共路徑指向內存。temp是系統的臨時文件，存放內存刷新值。

6.1 配置出口文件

在出口文件配置中加一個publicPath:’temp/’ 。

 //出口文件
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist'),
        publicPath:'temp/'
    }

6.2 修改index.html中引入的js文件

<script src="./temp/index.js"></script>

6.3 從新啓動服務配置成功

關閉以前的服務，而後使用npm run server 從新啓動服務。

npm run server

6.4 測試自動刷新瀏覽器是否成功

改寫入口文件中內容，而後保存，能夠看到瀏覽器自動刷新，渲染了最新的值，說明自動刷新配置成功。

7. Babel安裝配置

在webpack中配置Babel須要先加入babel-loader，咱們使用npm來進行安裝，咱們還須要支持es2015和React，因此要安裝以下四個包：

此處爲了兼容問題我使用指定版本的安裝方式，以下：

npm  install --save-dev babel-core@6.26.3 babel-loader@7.1.4 babel-preset-es2015@6.24.1 babel-preset-react@6.24.1

固然你也可使用下列方式安裝最新的，出現版本問題在對應去調整便可（不過有些費時費力而已，呵呵）

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

這裏四個包的安裝，這四個包是不能省略。安裝後你會在package.json裏看到這些包的版本以下：

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.7"

8. .babelrc配置

安裝完成後，咱們須要對咱們的babel進行一些相關配置,使其對es六、react等進行支持。

8.1 新建 `.babelrc`

在項目根目錄新建.babelrc文件，並把配置寫到文件裏。

.babelrc:

{
    "presets":["react","es2015"]
}

9. 配置module

.babelrc配置完成後，到webpack.config.js裏配置module，也就是配置咱們常說的loader。

module:{
    loaders:[
        {
            test:/\.(jsx|js)$/,//匹配掉js或者jsx的正則
            exclude:/node_modules/,//排除不操做的文件
            loaders:"babel-loader",//使用loader進行操做
        }
    ]
}

10. 編寫React

webpack經過上邊的步驟，基本已經配置完成了，這裏咱們寫一個React文件來進行測試一下。

10.1 安裝React相關包

安裝React和React-dom：

npm install --save react  react-dom

10.2 改寫入口文件

安裝完成後，咱們改寫app/index.js文件，把原來原生的JavaScript代碼改爲React代碼。

app/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    <div>Hello react</div>,
    document.getElementById("app")
);

10.3 新增掛載點

在index.html中新增一個div層，設置id="app"做爲react的掛載點。

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack react案例</title>
</head>
<body>


<!--掛載點-->
<div id="app"></div>


</body>
<!--引入出口文件-->
<script src="./temp/index.js"></script>
</html>