HAPPY LIFE AND cODING

Webpack4 筆記 – 1

webpack 是什麼?

以前我們在編寫 html 時,我們會引入很多 JS 文件,而造成一次要發起多個HTTP請求,造成網頁執行變慢,如果你的 JS 中有互相引用,但順序不對時(因為文件順序不明確),就會出現錯誤。因此,為了要改變這種做法,而使用 webpack 幫我們解決這個問題。

有人說webpack 是 JS 的翻譯器 ? 事實上,webpack 只認識 import 語法而已,其他的高級 js 語法完全不認識。並且,在官網上已經明確定義 webpack 是一個 JS模塊打包工具 , 把模塊打包過後生成一個 js 文件而已。

Webpack安裝方式

webpack 安裝方式分為2種,全局安裝和項目中安裝。基本上大多使用項目中安裝

全局安裝

$ npm install webpack webpack-cli -g

項目中安裝

安裝前可先初始化
$ npm init -y

需安裝webpack -cli,再安裝webpack , 才可以使用 ES6 moudule 引入方式,這樣一來, webpack 才會翻譯 ES6 moudule 的引入方式,讓它變成瀏覽器看的懂的東西

以下2者階為 項目中安裝方式(2者相等)
$ npm install webpack webpack-cli --save-dev
$ npm install webpack webpack-cli -D 

在項目中安裝完,在命令行中輸入 webpack -v ,會找不到版本號,是因為 webpack 是安裝在個別項目之中,並非全局,所以會找不到命令。這時候,我們需要用到以下指令,讓它到當前項目中 node_modules/webpack 資料匣下去啟動它。

npx webpack -v //4.26.0

如果要指定安裝的版本號需加@符號

$ npm install webpack-cli@4.16.5 -g --save-dev