基於Webpack搭建React開發環境

Russ_Zhong發表於2018-05-16
WebReact開發環境

前幾天一直在學習webpack，總算比之前學習的時候有了點收穫，所以在昨天釋出了一篇webpack入門筆記，今天繼續使用webpack練了練手，搭建了一個React開發環境，如果還不熟悉的童鞋可以看一下昨天釋出的筆記：入門webpack筆記

一、初始化專案資料夾

在任意目錄下，新建一個資料夾作為你的專案資料夾，命名隨意。隨後使用命令列工具，切換到該資料夾，鍵入npm init進行初始化（遇到的問題一直回車就好了），初始化完成之後可以看到生成了一個package.json檔案。

隨後在該專案資料夾下新建兩個資料夾：/dist和/src，其中/src用於放置開發的原始碼，/dist用於放置“編譯”後的程式碼。

隨後在/src目錄下新建index.html、index.css和index.js檔案

二、安裝webpack工具

通過命令列使用webpack 4需要安裝兩個模組：webpack和webpack-cli，都安裝為開發環境依賴。

npm install -D webpack webpack-cli
複製程式碼

安裝完成之後可以看到你的package.json檔案發生了變化，在devDependencies屬性下多了兩個包的屬性。

三、配置最基本的webpack

  • 1.安裝最基本的外掛：

      npm install -D html-webpack-plugin clean-webpack-plugin webpack-dev-server css-loader webpack-merge style-loader
複製程式碼

  • 2.在專案資料夾下新建檔案webpack.base.conf.js，表示最基本的配置檔案，內容如下：

      const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
      entry: './src/index.js',
      output: {
          filename: 'bundle.[hash].js',
          path: path.join(__dirname, '/dist')
      },
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader']
              }
          ]
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './src/index.html'
          }),
          new CleanWebpackPlugin(['dist'])
      ]
  };
複製程式碼

    其中，/src/index.html是你的網站入口HTML檔案，/src/index.js是你的入口js檔案。

  • 3.在專案資料夾下新建webpack.dev.conf.js檔案，表示開發環境下的配置。內容如下：

      const merge = require('webpack-merge');
  const baseConfig = require('./webpack.base.conf.js');

  module.exports = merge(baseConfig, {
      mode: 'development',
      devtool: 'inline-source-map',
      devServer: {
          contentBase: './dist',
          port: 3000
      }
  });
複製程式碼

  • 4.在專案資料夾下新建webpack.prod.conf.js檔案，表示生產環境的配置，內容如下：

      const merge = require('webpack-merge');
  const baseConfig = require('./webpack.base.conf.js');

  console.log(__dirname);
  module.exports = merge(baseConfig, {
      mode: 'production'
  });
複製程式碼

四、配置npm scripts

配置了三個配置檔案以滿足兩個不同環境下的程式碼構建，使用語義化較好的npm scripts來構建程式碼有利於簡化工作。

新增新的scripts內容到package.json檔案的scripts屬性，記得用雙引號引起來，其屬性如下：

// package.json
{
    "scripts": {
        "start": "webpack-dev-server --open --config webpack.dev.conf.js",
        "build": "webpack --config webpack.prod.conf.js"
    }
}
複製程式碼

配置完之後，可以嘗試修改/src/index.html、/src/index.js或/src/index.css，執行npm scripts命令檢視效果。

比如按照以下內容建立檔案：

index.html

<html>
    <head>
        <meta charset="utf-8"/>
        <title>React & Webpack</title>
    </head>
    <body>
        <div id="root">
            <h1>Hello React & Webpack!</h1>
        </div>
    </body>
</html>
複製程式碼

index.css

body {
    background-color: blue;
}

#root {
    color: white;
    background-color: black;
}
複製程式碼

index.js

import './index.css';

console.log('Success!');
複製程式碼

隨後使用命令npm run start，即可看到效果。修改css或者js檔案，儲存之後可以看到瀏覽器自動重新整理並且展示出了你剛剛所做的更改。

做到這裡，一個基本的開發環境已經搭建出來了，下一步就是針對React特定的環境，配置不同的webpack來進行構建。

使用React開發，主要是ES6（雖然最近所有高階瀏覽器都已經支援ES6，但是還是要為低階IE做準備）和React的JSX語法需要進行轉換。下面針對這兩種語法進行配置。

五、配置Babel

Babel是一個優秀的JavaScript編譯器（這句話源自Babel官網），通過Babel的一些外掛，可以將JSX語法、ES6語法轉換為ES5的語法，使得低階瀏覽器也可以執行我們寫的程式碼。

（1）安裝Babel預設

通過以下命令安裝Babel預設、babel-loader、babel-polyfill和babel-preset-react：

npm install -D babel-preset-env babel-loader babel-polyfill babel-preset-react
複製程式碼

（2）配置.babelrc

在專案資料夾的根目錄下新建一個.babelrc的檔案（Windows下無法直接建立，可以通過將檔案命名為.babelrc.達到建立的目的），在檔案內輸入以下內容：

{
    "presets": ["env", "react"]
}
複製程式碼

（3）配置webpack.base.conf.js

在module.rules中插入一個新物件，內容如下：

{
    test: /\.js$/,
    use: 'babel-loader',
    exclude: /node_modules/
}
複製程式碼

（4）安裝react和react-dom模組

npm install --save react react-dom
複製程式碼

（5）開始開發

在/src中新建一個App.js檔案，內容如下：

import React from 'react';

class App extends React.Component {
    render() {
        return <div>
            <h1>Hello React & Webpack!</h1>
            <ul>
                {
                    ['a', 'b', 'c'].map(name => <li>{`I'm ${name}!`}</li> )
                }
            </ul>
        </div>
    }
}

export default App;
複製程式碼

清空index.js之後在其中寫入如下內容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App/>, document.getElementById('root'));
複製程式碼

使用npm run start命令開啟頁面可以看到使用React寫出來的效果了。

開啟瀏覽器檢視編譯後的程式碼，找到App元件中的map函式這一段，可以發現ES6的語法已經被轉換到了ES5的語法：

['a', 'b', 'c'].map(function (name) {
    return _react2.default.createElement(
        'li',
        null,
        'I\'m ' + name + '!'
    );
})
複製程式碼

箭頭函式被寫成了function匿名函式。

六、說明

上面的步驟，我已經重新跑了一遍，一步一步按照來就可以搭建成功，有興趣的童鞋可以照著跑一遍。^_^

另外如果還有錯誤的話，請提醒我一下，我一定會馬上改正的！

相關文章