一.創(chuàng)建項(xiàng)目空文件夾test2：

二.創(chuàng)建package.json：

在空文件中打開cmd，在cmd中輸入npm init，成功以后會(huì)自動(dòng)創(chuàng)建一個(gè)package.json文件

三.文件結(jié)構(gòu)搭建：

react_project
----www
????—app
????????----main.js
????—index.html
—package.json
—webpack.config.js**

四.配置webpack.config.js：

如下圖，配置好參數(shù)，直接在cmd中輸入webpack，會(huì)生成一個(gè)dist文件夾，然后直接在index頁面中引入dist文件夾下的bundle.js文件

五.配置loader：

該配置用于解析es6，es7,es8中的一些高級語法
1.安裝依賴
npm install --save-dev babel-core babel-loader babel-preset-env

因?yàn)檫@邊是自動(dòng)安裝最新版本，所有我們還要再安裝一次babel-loader地7版本，只要輸入npm install --save-dev babel-loader@7就可以了
2.配置依賴

搭建到這里我們便可以配置react,但是為了保證后面開發(fā)正常，我們還需要兩個(gè)babel插件

六.配置loader：

為了讓babel能夠正常編譯…語法，要安裝babel-plugin-transform-object-rest-spread
為了能夠識別async/awati,*/yield,要安裝babel-plugin-transform-runtime

七.react安裝：

1.npm install --save-dev babel-preset-react該插件是為了解析react中的jsx語法

2.安裝react和react-dom，這兩個(gè)東西是dva的peerDependencies
npm install --save-dev react react-dom

3.安裝dva,dva中有redux,react-dedux,react-router-redux
npm install --save-dva

4.安裝一些其他插件，比如classnames和ramda
npm install classnames ramda

總結(jié)

以上是生活随笔為你收集整理的webpack+react项目搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。