react+webpack開發環境配置

時間 2019-11-11

標籤 react+webpack react webpack 開發環境配置欄目 React 简体版

原文原文鏈接

　　react是目前很是熱門的前端框架，提倡組件化開發。所謂的組件，簡單理解，就是一個獨立的頁面部件（包括頁面模版，樣式，邏輯等），它是一個獨立的總體。javascript

　　webpack，是一個模塊打包工具，其主要功能，就是將瀏覽器端沒法識別的代碼，經過各類loader和plugin，生成瀏覽器可用的代碼。好比，咱們能夠在瀏覽器端使用ES2015和JSX編碼的文件。css

　　在使用react進行組件化開發以前，咱們首先須要配置一個咱們能夠使用的開發環境，下面，咱們將一步步講解，配置一個基本的開發環境。其中安裝的文件都是當前最新版本。在開始以前，請先保證你已經安裝了node。html

1. 建立測試項目

　　爲了可讓咱們每一步均可以進行測試，瞭解其中都作了什麼，咱們提早編寫咱們的測試項目。你們能夠先不用深刻理解。（在咱們之後的項目中，咱們可能會用JSX文件和sass文件，在這裏咱們儘可能真實且簡單的還原項目）。前端

　　1）首先咱們建立一個項目文件夾，名爲testjava

　　2）在文件中添加index.jsx，hello.jsx, index.scss, index.htmlnode

1 // index.scss
2 
3 $color: #f40;
4 
5 h1 {
6     color: $color;
7 }

1 // hello.jsx
2 module.exports = 'Hello React';

 1 // index.jsx 
 2 // 引入react和react-dom模塊
 3 // 使用ES2015模塊導入語法
 4 import React from 'react';
 5 import ReactDOM from 'react-dom';
 6 
 7 // 引入自定義的hello.jsx
 8 var text = require('./hello.jsx');
 9 
10 // 引入咱們編寫的sass文件
11 require('./index.scss');
12 
13 // 編寫一個簡單的組件
14 class App extends React.Component {
15     render(){
16         return (
17             <h1>{text}</h1>
18         );
19     }
20 };
21 
22 // 建立一個組件實例，將組件掛載到文檔結構中
23 ReactDOM.render(<App />, document.body);

 1 // index.html
 2 
 3 <!DOCTYPE html>
 4 <html>
 5   <head>
 6     <meta charset="UTF-8">
 7     <title>My test</title>
 8   </head>
 9   <body>
10       <script type="text/javascript" src="bundle.js"></script> // bundle.js是由webpack自動生成的文件，文件名經過配置webpack設置
11   </body>
12 </html>

　　以上是咱們項目的基本結構。react

　　爲了方便項目文件的管理，咱們使用npm，在項目根目錄下使用npm init --yes，在根目錄下生成一個package.json，管理項目依賴等。webpack

2. 安裝webpack

　　1）以命令行工具的形式使用webpack時，在全局安裝webpack。git

　　npm install webpack -g

　　2) 編寫本身的構建腳本，或由項目指定須要依賴的webpack，本地安裝，webpack只是構建工具的角色，應該安裝在dev－dependencies中，可是，目前咱們只使用命令行工具，這種安裝方式，只是做爲介紹，在以後的搭建過程當中並不會用到。github

　　npm install webpack --save-dev

3. 配置基本的webpack

　　在項目根目錄下添加webpack.config.js配置文件，它是一個Node.js模塊格式的配置文件，直接導出一個配置對象。

 1 // 用於拼接路徑
 2 var path = require('path');
 3 
 4 module.exports = {
 5     // 指定項目入口
 6     entry: path.resolve(__dirname, 'index.jsx'),
 7 
 8     // 對輸出結果描述
 9     output: {
10         // 輸出路徑
11         path: path.resolve(__dirname, 'build'),
12         // 輸出的文件名
13         filename: 'bundle.js'
14     },
15 
16     // 配置模塊使用的加載器
17     module: {
18         loaders: [
19         {
20             // 假設咱們擁有一個編譯sass加載器
21             // 匹配字符串
22             test:/\.scss$/,
23             // 使用的加載器，不能夠省略加載器的後綴-loader
24             loaders:['style-loader', 'css-loader', 'sass-loader']
25         }
26     }
27 }

4. babel，sass加載器

　　能夠從咱們的項目結構中發現，咱們使用了.jsx文件和.scss文件，瀏覽器中沒法正常使用這類文件，咱們經過添加加載器，將進行解析，以便瀏覽器使用。

　　1）babel加載器

　　npm install babel-core babel-loader --save-dev

　　2）配置.babelrc文件

　　　　在項目根目錄下建立一個.babelrc文件，存放一個對象，分別用presets字段存放規則，plugins字段存放插件，目前咱們只用到ES2015和react規則

　　npm install babel-preset-es2015 babel-preset-react --save-dev // 添加規則

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

　　3) sass加載器

　　npm install node-sass style-loader css-loader sass-loader --save-dev

　　4) 配置webpack.config.js配置文件

 1     // 模塊部分更新爲下面代碼
 2 
 3     module: {
 4         loaders: [
 5         {
 6             test:/\.scss$/,
 7             loaders:['style-loader', 'css-loader', 'sass-loader']
 8         },
 9         {
10             test:/\.jsx?$/,
11             loaders: ['babel-loader']
12         }]
13     },

　　此時便可正常加載.scss和.jsx文件。

5. 安裝react和react-dom

 npm install react react-dom --save

　　到此，咱們在項目根目錄下執行webpack已經已經在根目錄下生成一個bundle.js文件，咱們能夠正常在index.html文件文件引用，而且在瀏覽器中查看。

以後的內容，咱們將會介紹webpack的插件的用法，以及webpack-dev-server配置方法。

1. html-webpack-plugin

　　咱們能夠發現咱們index.html文件中，只是一個空的HTML結構和引入了生成的bundle.js文件，所以咱們能夠利用html-webpack-plugin插件來自動生成index.js文件。

　　1) 下載插件

　　npm install html-webpack-plugin --save-dev

　　2）配置webpack.config.js文件

　　首先在文件頭部引入插件，而後在添加一個plugins字段，並在其中一個插件對象實例。

1 var HtmlWebpackPlugin = require('html-webpack-plugin');
2 
3 module.exports ={
4    plugins: [
5         new HtmlWebpackPlugin({
6             title: 'My test'
7         })
8     ]
9 }

　　此時咱們刪除index.html和bundle.js，webpack自動在build路徑下建立這兩個文件。

2. webpack-dev-server

　　咱們能夠使用webpack --wacth來監控代碼，只要代碼一修改，自動更新bundle.js，可是瀏覽器的網頁還須要手動刷新。在開發工程中，很是的不方便。webpack-dev-server爲咱們解決了這個問題，它是一個小型服務器，在開發過程當中能夠實時刷新網頁。

　　下面咱們來安裝配置webpack-dev-server。

　　1）全局安裝webpack-dev-server

　　npm install webpack-dev-server -g

　　2）配置webpack-dev-server

1     // 添加devServer字段,其中字段變更比較大，配置時須要根據文檔進行配置
2     devServer: {
3         historyApiFallback: true,
4         inline: true,
5         contentBase:'./build/',
6         port:'8086'   // 我電腦上默認的8080端口沒法訪問，因此設置port爲8086
7     },

　　3）設置運行快捷方式

　　在package.json中的scripts字段中添加下面一行，在命令行中輸入npm run dev，直接啓動webpack-dev-server，能夠在指定端口進行訪問。

1   "scripts": {
2     "dev": "webpack-dev-server"
3   },

3. 組件熱加載（HMR）

　　咱們在上述描述下，搭建的環境，每修改一次代碼，頁面都會總體刷新一次，咱們更但願，頁面局部刷新修改的組件。所以就有了組件熱加載這個概念。咱們能夠直接安裝babel-preset-react-hmre實現HMR。

　　npm install babel-preset-react-hmre --save-dev

.babelrc中的配置改成：

1 {
2   "presets": ["react", "es2015"],
3   "env": {
4     "development": {
5       "presets": ["react-hmre"]
6     }
7   }
8 }

並將啓動命令改成：

"scripts": {
    "dev": "webpack-dev-server --hot"
  },

此時咱們在命令行輸入npm run dev，便可。

完成項目github地址：https://github.com/DiligentYe/react-webpack-env

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。