webpack4.0--如何安裝和配置（一）

前言

一直計劃想把webpack系統的學一遍，如今終於開始了，接下來會分享我從零開始學習的過程，記錄本身，分享他人，這篇文章主要分享安裝和配置，也就是文檔中Getting Started的學習。

如何安裝webpack

1. 環境配置：在學習webpack以前，先配置一下node環境，下載node，傻瓜式安裝就好了，最好是選擇穩定版本的node，不要選擇最新版本的。在這裏個人版本是v10.15.3版本
2. 在桌面中建立webpack-demo文件夾，命令建立：mkdir webpack-demo 進入webpack-demo文件夾
3. 進入文件夾後初始化這個項目，命令：npm init

   初始化後會有不少配置項，名字、版本、描述，能夠不用管一路回車建立就好了，文檔中也有提到，若是你不想填寫這些配置，那就執行npm init -y就能夠

4. 在編輯器裏面打開項目，在這裏我進行了增刪改的操做，由於目前有些東西用不到也不須要，原有的樣子

   整理後：private的配置意思是私有項目，不會上傳到npm庫裏。

   
   

5. 初始化完畢以後開始安裝webpack，有兩種方式安裝webpack
   第一種：全局安裝，命令：npm install webpack webpack-cli -g  安裝webpack同時安裝webpack-cli工具（安裝webpack-cli的做用就是能讓webpack打包命令順利執行）
6. 注意：通常不要去安裝全局，由於你不可能所在公司的全部項目webpack都是一個版本，可是若是你要是啓動兩個以上的項目的話因爲版本不同確定會遇到項目沒法啓動的問題，因此仍是在本項目中去安裝比較好
   刪除全局webpack命令：npm uninstall webpack webpack-cli -g  這樣就刪除了，查看版本也找不到了   

   第二種：項目安裝，命令：npm install webpack webpack-cli --save-dev 或者直接-D
   我這裏的webpack版本是4.31.0，能夠根據npm install webpack@版本號 webpack-cli -D 安裝本身指定的版本
   查看項目

   
   
   

手動配置文件

1. 在根目錄建立webpack.config.js文件（wenbpack在打包的時候回去默認尋找這個文件，若是不是這個文件名，那麼打包過程就會報錯，固然你也能夠改變這個默認文件，你能夠執行npx webpack --config  你想起的名字.js，這樣打包的時候webpack就會去尋找你想設置的配置文件）
   

   
   

   注意：__dirname是兩個下劃線
2. 執行npx webpack 命令進行打包
   

   
   

3. 其實你也能夠設置成相似vue那種執行 npm run build 那種進行打包，可是須要配置一下
   

   
   

4. 打包後整理文件，無報錯
   

   
   

總結

以上就是webpack4版本的開始安裝和簡單的配置，通俗易懂，若是你也想學習webpack4，你能夠關注我，咱們一塊兒學習，這只是一個開始，後期每週至少更新一篇（由於最近工做比較緊張，因此我只能抽時間去學習和寫文章），持續更新中~~~~~~~~~給個小小的贊讓咱們不斷前行吧！！！