為啥要使用webpack呢？webpack又是啥？

• 沒有項(xiàng)目開發(fā)經(jīng)驗(yàn)的你，可以先把他看做是一個日后開發(fā)會用到的一個好工具
• 有過開發(fā)經(jīng)驗(yàn)的，應(yīng)該對他有所了解
• 話不多說，先讓我們使用一下

1. webpack的安裝

1.1安裝之前的工作

• 在你的開發(fā)工具中創(chuàng)建一個文件夾，我的是app,在這個文件夾內(nèi)打開命令窗口，輸入指令：npm init
  

  image.png

• 之后 咋們就要開始安裝了輸入指令npm i webpack --save-dev

*注意：安裝完東西的時候，咋們就要檢查是否安裝成功
輸入指令 webpack -v 進(jìn)行檢查 ，之后可能會報錯讓你安裝 webpack-cli (原因是你現(xiàn)在安裝的webpack的版本很高了，把webpack *** 的指令全都扔給了webpack-cli,所以你在使用webpack 指令的時候需要安裝一下 webpack-cli)

• 若沒有安裝成功，則請輸入這條指令 npm i webpack-cli --save-dev
• 繼續(xù)用 webpack -v 檢查是否安裝成功
• 成功則繼續(xù)往下看就好了，沒有成功則繼續(xù)輸入指令 npm i -g webpack-cli
• 這下，進(jìn)行驗(yàn)證應(yīng)該就沒有什么問題了，如果再有問題，請把自己之前的安裝刪除之后再徹底走一下上面的安裝流程。如果還有問題歡迎交流。

• 成功結(jié)果

  
  
  image.png

安裝成功之后，我們就開始使用吧！

• 首先在app文件夾內(nèi)創(chuàng)建一個hello(隨意你喜歡的名稱).js
• 在app路徑下的命令行中輸入指令 webpack hello.js -o bundle.js
  
  image.png
• 這個 -o是webpack4的新指令，在隨后的的學(xué)習(xí)中，你就會慢慢的理解的。

這就是初步的使用了，下次的webpack配置，我們再約。一起加油??！