基于webpack4.X從零搭建React腳手架的方法步驟
項目初始化
安裝webpack
本次創建是基于webpack4
新建webpack配置文件
【基于webpack4.X從零搭建React腳手架的方法步驟】在根目錄創建build文件夾 ， 添加一個js文件，命名為webpack.base.conf.js
新建webpack配置文件
在根目錄創建build文件夾，添加一個js文件 ， 命名為webpack.base.conf.js
在build文件夾中再添加一個js文件，命名為 webpack.prod.conf.js
在根目錄下創建app目錄，然后創建index.js文件
在根目錄創建一個public文件夾，然后新建一個index.html文件
當前項目目錄樹
安裝webpack-cli
webpack 4.0 版本之后的webpack，已經將webpack命令工具遷移到webpack-cli模塊了,需要安裝 webpack-cli
package.json文件 scripts屬性配置一個build命令
其值為：webpack --config build/webpack.prod.conf.js，以下是scripts的相關代碼
安裝React
修改app目錄下的index.js的代碼
注意 import 屬于ES6規范，因此需要轉譯ES2015 的語法，安裝并配置 babel 以及相關依賴
根目錄創建.babelrc文件，配置presets.
修改webpack.base.conf.js文件
運行 npm run build
添加插件
public下的index.html本該自動添加到dist目錄，并且引用資源自動加載到該文件，通過html-webpack-plugin實現這一步
webpack.prod.conf.js中配置plugins屬性
刪除 index.html 中手動引入的 script 標簽
重新編譯查看 npm run build 瀏覽器打開查看目錄 dist 下的 index.html
以上步驟都成功的前提下繼續走下一步
生成的文件名添加Hash值，目的是解決緩存問題
修改webpack.prod.conf.js，mode: 'production', 增加以下代碼
生成前需要清理之前項目生成的文件 ， 因為由于文件名的改變如果不刪除會一直增加
安裝插件 clean-webpack-plugin
修改 webpack.prod.conf.js
公共代碼與業務代碼分離
修改 webpack.base.conf.js 的 entry 入口屬性，抽出框架代碼
修改webpack.prod.conf.js，增加以下代碼 ， 目的是分離框架代碼和業務代碼
雖然上面步驟抽出框架代碼生成兩個文件，但是app.js還是包含框架代碼
cacheGroups對象，定義了需要被抽離的模塊
其中test屬性是比較關鍵的一個值，他可以是一個字符串 ， 也可以是正則表達式，還可以是函數 。如果定義的是字符串 ， 會匹配入口模塊名稱，會從其他模塊中把包含這個模塊的抽離出來
name是抽離后生成的名字，和入口文件模塊名稱相同，這樣抽離出來的新生成的framework模塊會覆蓋被抽離的framework模塊
整合 webpack-dev-server
開發環境開啟服務監聽文件改動實時更新最新內容
在build中添加webpack.dev.conf.js文件
在package.json scripts屬性添加內容
npm run dev
自動打開瀏覽器打開入口頁面實時更新
獨立導出 css 文件
安裝css相關依賴
sass less 預處理
webpack.base.conf.js 文件修改
圖片和路徑處理
webpack.base.conf.js 文件修改
build 時報錯
webpack4.0中使用“extract-text-webpack-plugin”報錯
解決辦法
背景圖片路徑問題
由于css文件分離出來的原因，會導致在css文件夾下找images文件夾下的圖片
解決辦法 publicPath屬性改為 '/'，以絕對路徑的方式尋找資源
