webpack編譯react需要注意哪些細節

今天小編給大家分享一下webpack編譯react需要注意哪些細節的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。

react安裝

當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。

# npm install react react-dom –save

react安裝就這樣簡單，其實react和react-dom就是相當于js類庫。但是我們需要解析器來解析react的語法。

react解析器babel安裝

babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_modules下。

# npm install babel-core babel-loader babel-preset-react –save-dev
//本地安裝
#npm install babel-core babel-loader babel-preset-react –g
//全局安裝

一般情況下我們選擇本地安裝，這樣便于管理。

打包工具webpack的安裝

同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。

# npm install webpack –save-dev
//本地安裝
# npm install webpack –g
//全局安裝

如果選擇本地安裝，那么在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。

這里我們選擇全局安裝。這樣才能出現我們將要說的問題。

webpack配置文件編寫

安裝完webpack以后，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫加載loader部分。

代碼一

module:{
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel',
            query:{
                presets:['react']
            }
        }
    ]
}

編譯過程中出現的錯誤

好了，到了關鍵的地方了?，F在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。

接下來我們就要編譯打包我們的項目。

# webpack

執行該命令以后，你會發現出現如下的錯誤：

ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Module build failed: Error: Couldn't find preset "react" relative to directory "/node/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/process"
……

這也就是說找不到babel-preset-react。

好了，說了這么多終于在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什么出現這種問題，其原因總要弄清楚。什么樣的配置會出現這種問題，了解以后才容易上手解決）。

解決問題的方式

出現上述問題以后，我們有這樣三種方式可以解決。

方式一

要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。

query:{
    presets:['react']
}

好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。

#npm remove babel-core babel-loader babel-preset-react –save-dev
//首先移除原先安裝的babel
#npm install babel-core babel-loader babel-preset-react –g
//全局安裝

沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便于管理，所以還是使用其他的方式。

方式二

此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。

# npm remove webpack –g
//移除原先的webpack
# npm install webpack –save-dev
//將webpack安裝到本地位置——也就是項目目錄下的node_modules中
# ln –s /項目根目錄/node_modules/webpack/bin/webpack.js /usr/bin/webpack
//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）
//這樣我們就可以在任意位置直接使用webpack命令了。

此時我們已經改變了webpack的安裝位置?，F在二者同在項目目錄下安裝。所以可以正確編譯了。

此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。

方式三

該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。

代碼二

module:{
   loaders: [
       {
           test: /\.js$/,
           loader: 'babel',
           exclude:/node_modules/,
           query:{
               presets:['react']
           }
       }
   ]
}

以上就是“webpack編譯react需要注意哪些細節”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。