webpack（2）

1、瞭解webpack是什麼？（摘選官方手冊）

• （1）本質上是一個現代的javascript應用程序的靜態模塊打包器；（詳情參考官網）

• （2）瞭解其中四大基本概念；

  • 一、入口（entry）
  • 二、輸出（output）
  • 三、加載（loader）
  • 四、插件（plugins）

---

2、直接上手（怎樣使用webpack)

• （1）安裝webpack

  • 一、安裝前提：

    • （1）node v（版本）8.11.3 或其餘
    • （2）npm v（版本）6.4.1 或其餘
    • （3）新建一個空白的文件夾：命名 webpackdemo

    • （4）在該文件打開cmd命令界面：操做 按住shift 鼠標右鍵在此處打開命令窗口

      備註：安裝webpack須要使用npm的部分指令，在此我也列出npm經常使用的指令，（如下的術語是我本身方便理解本身取的名字）

      • npm init -y 【初始化 生成一個package.json文件，裏面有些基本配置，能夠手動生成，也能夠修改，但如今不須要】
      • npm install(能夠簡寫爲 i) 模塊名（好比：webpack）-g【 安裝模塊自動生成node_modules目錄，這個命令是全局安裝，也就是說，它會爲本機添加webpack運行的環境變量，你在控制檯cmd輸入命令（好比：webpack -v）便可查看webpack當前版本信息】官方手冊不推薦使用全局安裝。
      • npm i 模塊名 --save-dev【安裝模塊 該安裝是將模塊安裝爲開發時依賴，意思是該模塊是在程序員開發項目時，就須要依賴該模塊，該模塊名會自動出如今 package.json中好處：能夠簡化輸入腳本命令。】實例：使用全局安裝時命令：請輸入代碼使用局部安裝命令：請輸入代碼。
      • npm i 模塊名 --save。
      • npm install 【直接使用該命令便可安裝當前項目全部依賴的模塊，不過內存佔用太大】

  • 二、安裝webpack

    1. npm init -y
    2. npm i webpack --save-dev
    3. npm i webpack-cli --save-dev
    4. 對上訴3步驟的介紹：初始化產生package.json文件，安裝webpack模塊爲開發時依賴。爲何須要安裝webpack-cli？webpack版本已經更新到4.25.1，該版本必須依賴webpack-cli，安裝順序不能變，若是變了可能會報錯此處附上本人github上的代碼webpackdemo

---

3、寫這篇文章的緣由

• 本身在學習參考網上的教程時，遇到了好多坑，參考官方手冊，全是英文，又看不懂，因此就準備本身把坑與你們分享，其實這是個人第一篇文章，有點小激動，有錯誤的地方但願你們指出百度