webpack(2)

1、瞭解webpack是什麼?(摘選官方手冊

  • (1)本質上是一個現代的javascript應用程序的靜態模塊打包器;(詳情參考官網)
  • (2)瞭解其中四大基本概念;javascript

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

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

  • (1)安裝webpackjava

    • 一、安裝前提:node

      • (1)node v(版本)8.11.3 或其餘
      • (2)npm v(版本)6.4.1 或其餘
      • (3)新建一個空白的文件夾:命名 webpackdemo
      • (4)在該文件打開cmd命令界面:操做 按住shift 鼠標右鍵在此處打開命令窗口webpack

        備註:安裝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 【直接使用該命令便可安裝當前項目全部依賴的模塊,不過內存佔用太大】
    • 二、安裝webpackgit

      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、寫這篇文章的緣由

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