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 [email protected] -g --save-dev