--- title: 'webpack' --- ![](https://webpack.js.org/e0b5805d423a4ec9473ee315250968b2.svg) --- ![](https://i.imgur.com/gmIHUx4.png) --- 直接來開個空白新專案吧 --- 然後建立管理 npm 套件的 package.json ```bash= npm init -y npm i -D webpack ``` --- ![](https://i.imgur.com/B3WsTP8.png) --- ![](https://i.imgur.com/HjH0iOA.png) --- ![](https://i.imgur.com/2Yjwq3B.png) --- ![](https://i.imgur.com/f6v1TTY.png) --- ```bash= npm run build ``` 這時它提醒了我沒有裝 webpack-cli ![](https://i.imgur.com/u1AbSeQ.png) --- 就給它裝下去，再次執行 ```bash= npm run build ``` --- ![](https://i.imgur.com/L3To8kY.png) --- ![](https://i.imgur.com/wmV9NOV.png) --- 這是最最預設的作法 想要更多更多配置就得要寫 webpack.config.js ![](https://i.imgur.com/n6RysdK.png) --- ![](https://i.imgur.com/gmIHUx4.png) --- webpack 可以幫你把許多不同類型的模組 build 成靜態資源 還有許多 loader 跟 plugins 可以使用 --- https://webpack.js.org/loaders https://webpack.js.org/plugins --- 講了一大堆東西 就是為了要推 React --- ###### tags: `前端` 下一章： [React](https://hackmd.io/p/rJrGDSlT4#/)