# React webpack設定 * 全域安裝 ``` npm install webpack -g npm install webpack-cli -g ``` * 安裝npm，並把webpack加入package.json中 ``` npm init -y npm install webpack --save-dev npm install webpack-cli -dev ``` * 設定webpack * 使用babel-loade，來讓瀏覽器讀得懂JSX。 * 使用babel-loader套件 * @babel/core：核心套件一定要裝。 * @babel/preset-react：處理JSX。 * @babel/preset-env：處理ES6。 ``` npm install babel-loader --save-dev npm install @babel/core --save-dev npm install @babel/preset-react --save-dev npm install @babel/preset-env --save-dev ``` ![](https://i.imgur.com/ET8Pnu9.png) * 打包檔案，會多出bundle.js檔案 ``` webpack -p ``` ![](https://i.imgur.com/Yz0LIS0.png) * html srcipt 使用打包的js ![](https://i.imgur.com/VYhonfw.png)