React+Webpack快速上手指南

時間 2019-11-12

標籤 react+webpack react webpack 快速上手指南欄目 React 简体版

原文原文鏈接

前言

這篇文章不是有關React和Webpack的教程，只是一篇可以讓你快速上手使用目前這兩種熱門技術的前端指南，並假設你對二者有一個基本的認識。若是你想先行了解下React，能夠放肆的移步至 React官方教程，若是你已經使用了其餘的模塊加載與資源打包技術，不妨也來看看 Webpack 提供的思路。css

webstorm+react+webpack

強烈推薦使用webstorm！。（固然你徹底可使用諸如atom，Sublime之類的編輯器，但之因此選擇webstorm是由於它默認支持對react JSX 的語法高亮以及能夠手動開啓Emmet對jsx的支持，棒棒噠~）html

首先請這麼組織你的項目結構：前端

--your project
  |--app
    |--components
      |--productBox.jsx
    |--main.js
  |--build
    |--index.html
    |--bundle.js(該文件是webpack打包後生成的)

用npm安裝react、webpack

默認已經安裝了nodejs，並輸入：npm init根據提示輸入內容並建立package.json文件
而後依次輸入：java

npm install react --save-dev

npm install webpack --save-dev

安裝最新版本的React與Webpack並將它們保存至package.json內的開發依賴項目中。node

建立webpack.config.js配置文件

新建一個名爲webpack.config.js的文件，它應該長這個樣：react

var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './app/main.js'),
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  }
};

其中entry指定了webpack的入口程序，比如c++和java中的main程序同樣，咱們把最終要插入到頁面指定位置的react模板寫入main.js中：
app/main.jswebpack

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

以及引入的自定義react組件：
app/components/productBox.jsnginx

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

module.exports = ProductBox;

而output則指定了webpack打包成功以後文件名稱以及文件的存放位置。
依照以前指定的項目結構，咱們能夠在index.html中直接引入打包生成的bundle.js，像這樣：
build/index.htmlc++

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>React Test</title>
</head>
<body>
  <div id="content"></div>
  <script src="bundle.js"></script>
</body>
</html>

安裝並啓用webpack-dev-server

webpack-dev-server容許咱們能夠把本地項目跑在像nginx那樣的web服務器上，更重要的是咱們能夠在package.json文件內定義scripts，同時修改webpack的配置文件來達到相似BrowserSync（即文件修改能被監聽，並自動刷新瀏覽器）的效果！git

咱們先打開package.json，並找到scripts代碼塊。在沒引入webpack-dev-server以前，咱們運行這個項目的姿式是這樣的：
修改scripts爲

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

而且執行：

npm run build

項目就跑起來啦，可是每次修改程序咱們都要手動輸入npm run build來跑項目，這無疑是一件很是蛋疼的事情。但有了webpack-dev-server光環，咱們的姿式應該是這樣的：
爲scripts添加

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

ps：dev裏各屬性值的意思是：

webpack-dev-server: 在 localhost:8080 創建一個 Web 服務器
--devtool eval:爲你的代碼建立源地址。當有任何報錯的時候可讓你更加精確地定位到文件和行號
--progress: 顯示合併代碼進度
--colors: 在命令行中顯示顏色
--content-base build:指向設置的輸出目錄

而且在index.html里加入：
build/index.html

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

在webpack.config.js的入口處加入：

var path = require('path');

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  }
};

以便在進行改動時瀏覽器能夠自動刷新。

最後執行：

npm run dev

你只要在瀏覽器打開這個地址：http://localhost:8080，webpack-dev-server會爲你準備好一切，你只要敲一敲鍵盤，save一下，所見即所得。

Webpack Loader

講到這裏，咱們基本上就能夠迅速搭建一個簡單的web項目，但不得不提的是webpack loader。它是我我的認爲相比於其餘模塊加載更牛X的地方，將它用於react的開發，結合react與生俱來的優越性能，二者完美無缺的配合簡直就是黃金組合。

總的來講webpack loader能夠實現：

能夠將React JSX語法轉爲js語句
React開發中支持ES6語法
支持經過import來直接引入css、less、sass甚至是圖片
支持css中引用的圖片大小在某一大小範圍以內直接轉爲BASE64格式
。。。。。等等等

爲了可以讓以上功能奏效，咱們要先安裝對應的：
babel-loader

npm install babel-loader --save-dev

css-loader

npm install css-loader --save-dev

less-loader

npm install less-loader --save-dev

style-loader

npm install style-loader --save-dev

url-loader

npm install url-loader --save-dev

而具體的實現，咱們只要在webpack的配置文件中加入module屬性裏的loaders：

var path = require('path');

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: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
};

經過指定文件後綴來執行對應的loader操做，咱們甚至能夠輕鬆的引入其餘類型的文件，最後全部被引入進來的文件都會通通打包到bundle.js中去！

開發環境下的優化

在開發React組件的代碼中，在webpack的幫助下咱們都是經過require(‘react’)的方式引入ReactJS，默認的require()方法會在webpack打包的時候去遍歷ReactJS及其依賴。試想下，若是咱們還引入了其餘的庫，例如jQuery、react-router、moment等，require都會以一樣的方式去遍歷，這會大大增長打包的時間。這顯然會影響到開發的效率。

爲了可以儘量的加速打包過程，咱們應該重寫它的行爲，鼓勵在開發中使用依賴的壓縮版本

假如咱們只引入了react，咱們能夠這樣修改webpack.config.js:

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

var config = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [pathToReact],
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
};

module.exports = config;

resolve屬性裏的alias用來告訴webpack，當引入react時，試圖去匹配壓縮過的react；
而module中的noParse則是告訴當webpack嘗試去解析壓縮文件時，這種行爲是不容許的。

固然啦，細心的你可能會發現當引入更多的庫時，這樣寫多少會顯得有點冗餘，爲此下面有個更加優雅的寫法：

var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var deps = [ 
  'react/dist/react.min.js',
  'react-router/dist/react-router.min.js',
  'moment/min/moment.min.js'
];
var config = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  resolve: {
    alias: {}
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [],
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.(png|jpg)$/, 
      loader: 'url?limit=25000' 
    }]
  }
};

deps.forEach(function (dep) {
  var depPath = path.resolve(node_modules_dir, dep);
  config.resolve.alias[dep.split(path.sep)[0]] = depPath;
  config.module.noParse.push(depPath);
});

module.exports = config;

瞬間biger起來了，待加以修飾以後，讓咱們更加便捷高效的享受React與Webpack帶來的樂趣吧。

相關的代碼請狠狠點擊這裏查看，

文／Chester723（簡書做者）原文連接：http://www.jianshu.com/p/418e48e0cef1 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。