webpack

什麼是webpack?

從本質上將,webpack是一個現代的JavaScript應用的靜態 模組 打包工具.簡單的講就是模組和打包.

前端模組化:

webpack其中一個核心就是讓我們可能進行模組化開發,並且會幫助我們處理模組間的依賴關係.

不僅僅是JavaScript檔案,我們的CSS,圖片,json檔案等等在webpack中都可以被當做模組來使用.

打包:

將webpack中的各種資源模組進行處理,比如壓縮圖片,將scss轉成css,將ES6語法轉成ES5語法,將TypeScript轉成JavaScript等操作.

和gulp打包工具的對比

• gulp的核心是Task,可以配置一系列的task,並且定義task要處理的事務.

• 如果我們的工程模組化依賴非常簡單,甚至是沒有用到模組化的概念,只需要進行簡單的合併,壓縮,就使用gulp即可.

• webpack更加強調模組化開發管理,而檔案壓縮合並,預處理等功能,是它附帶的功能

webpack安裝

• 首先要安裝Node.js ,Node.js自帶了軟體包管理工具npm

• 檢視自己的版本: node -v

• 全域性安裝webPack
  在控制檯輸入下面命令:

npm install webpack@3.6.0 -g    // -g 是全域性安裝

• 區域性安裝

--save-dev區域性安裝(本地安裝)

npm install webpack@3.6.0 --save-dev

為什麼全域性安裝後,還需要區域性安裝?

• 在終端直接執行webpack命令,使用的安裝的webpack
• 當在package.json中定義了scripts時,其中包含了webpack命令,那麼使用的是區域性webpack

開發專案進行測試

開啟Terminal 終端,進入專案,輸入命令

D:\VueWebpack-v0\01-webpack的使用\01-webpack的起步>webpack ./src/main.js ./dist/bundle.js

webpack基礎起步如圖所示:

入口和出口

如果每次使用webpack的命令都需要寫上入口和出口作為引數,就很麻煩,但是我們建立一個webpack.config.js 檔案作為一個出入口就非常方面了.
就以上述圖片為例,我們只要在控制檯輸入webpack命令,工具就會自動的執行webpack ./src/main.js ./dist/bundle.js這個命令一樣的效果.
webpack.config.js檔案:

使用require(‘path’),'path’是從Node的包裡匯入的,要想使用,必須要從Node匯入path包;直接操作異常如下:

在控制檯執行命令: npm init

如下圖步驟所示:

命令執行完生成的檔案:

如果有依賴的話還需要在控制檯輸入npm install 命令,操作如下:

當在執行時,如果出現ReferenceError: _dirname is not defined ,解決方法如圖所示:

正確的姿勢：

專案重新跑起:

webpack 和 npm run build 相應射
當在控制檯輸入: npm run build 命令時,會和webpack一樣的效果
配置如下:

輸入npm run build 命令後如圖顯示:

本地安裝

當我們使用全域性webpack時,有時可能造成與當前專案版本不相容,所以需要進行本地安裝,而且使用本地webpack是最常用的;
在控制檯執行以下命令 npm install webpack@3.6.0 --save-dev
其中 --save是本地安裝, -dev是開發時的依賴

注意: 只要在終端裡輸入的命令都是全域性的,當我們定義對映指令碼的時候會優先執行本地的,如果本地沒有就會執行全域性的.