init項目
1.建立項目檔案夾并進入
mkdir react-project
cd react-project
2.初始化npm
輸入npm init ，按照提示填寫項目基本資訊：
webpack
1.安裝webpack（webpack4.X）
npminstall--save-dev webpack webpack-cli -g
（--save-dev與--save的差別：
--save-dev表示隻是在編譯過程中所依賴的包，例如：webpack、sass-loader等 最後在package.json的devDependencies部分顯示
--save 表示編譯後在運作時還需要依賴的包，例如 react react-dom等 最後在package.json的dependencies部分顯示
-g 表示全局安裝）
2.建立webpack.config.js 檔案
這樣就完成了最簡單的webpack配置檔案。相應的我們需要在src目錄下建立一個index.js 檔案。
接下來在指令行輸入 webpack --config ./webpack.config.js就可以輸出dist檔案夾。
為了友善起見，通常我們會在package.json裡配置腳本指令。在scripts标簽下，添加一句"build": "webpack --config ./webpack.config.js"。這樣，我們就可以通過npm run build完成webpack打包。
3.配置開發應用伺服器
正常情況下，我們需要以應用伺服器打開我們的網頁，webpack-dev-server提供了一個簡單的web伺服器，并且能夠實時重新加載。首先需要安裝webpack-dev-server：
npm install -D webpack-dev-server
接下來，我們需要修改配置檔案，告訴開發伺服器，在哪裡尋找檔案：
修改webpack.dev.config.js,增加webpack-dev-server的配置
devServer:{
contentBase:path.join(__dirname,'./dist')
}
這段配置告訴webpack-dev-server，在預設host和port下建立服務，并将contentBase目錄下的目錄，作為可通路檔案。
接下來讓我們的伺服器跑起來，在package.json配置如下的指令腳本：
"scripts" : {
"start": "webpack-dev-server --mode development --open",
"build: "webpack --mode production --config ./webpack.config.js"
}
Babel & React
目前仍有浏覽器不相容ES6，同時react的jsx文法，也需要babel來将其轉化為能相容的js代碼：
npm install react react-dom react-router-dom -S
npm install babel-core babel-loader babel-preset-env babel-preset-react -D
安裝完之後，我們需要在webpack中配置使其生效。在webpack.config.js 的module中添加rules規則：
考慮到後期可能會有别的規則需求，例如antDesign的引入，我們将babel的配置提出來，在根目錄下建立檔案 .babelrc：
這樣我們就完成babel的相關配置，并且安裝了react相關依賴，可以書寫jsx文法了。
子產品熱替換（Hot Module Replacement）
1.安裝依賴
npm install [email protected] --save-dev
2. .babelrc 增加 react-hot-loader/babel
{
"presets":["es2015","react","stage-0"],
"plugins":["react-hot-loader/babel"]
}
3. webpack.dev.config.js入口增加react-hot-loader/patch
entry:[
'react-hot-loader/patch',
path.join(__dirname,'src/index.js')
]
4.根據需要，在src/index.js作相應修改，如：
檔案路徑優化
以前我們引用元件，或者頁面時候，都要寫相對路徑，如：../services/fetch，有時候可能會很複雜，webpack提供了一個别名配置，就是我們無論在哪個路徑下，引用都可以這樣寫：services/fetch
下面我們來配置下，修改webpack.dev.config.js，增加别名：
devtool優化
代碼哪裡寫錯了，浏覽器報錯隻報在build.js第幾行，這讓我們分析錯誤無從下手。
我們增加webpack配置devtool：
devtool:'inline-source-map'；
錯誤資訊就能詳細展示啦
編譯css
npm install css-loader style-loader --save-dev
webpack.dev.config.js rules增加
{
test:/\.css$/, use:['style-loader','css-loader']
}
編譯圖檔
npm install --save-dev url-loader file-loader
webpack.dev.config.js rules增加
{
test:/\.(png|jpg|gif)$/,
use:[{ loader:'url-loader',
options:{ limit:8192 }
}]
}
HtmlWebpackPlugin
這個插件，每次會自動把js插入到你的模闆index.html裡面去。
npm install html-webpack-plugin --save-dev
修改webpack.dev.config.js，增加plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
newHtmlWebpackPlugin({
filename:'index.html',
template:path.join(__dirname,'src/index.html')
})
]
加入 babel-plugin-transform-runtime 和 babel-polyfill
1.npm install --save-dev babel-plugin-transform-runtime
2.npm install --save-dev babel-polyfill
修改webpack兩個配置檔案：
內建PostCSS
他有很多很多的插件，比如Autoprefixer這個插件,可以自動給css屬性加浏覽器字首。
npm install--save-dev postcss-loader
npm install--save-dev postcss-cssnext