Webpack4.x 版本入門指南

本文是基於一位以前公司的同事zzj所寫的 Webpack入門指南 這篇文章做構建。本文是基於win環境搭建的webpack，以前的同事寫的入門指南是webpack3.0版本，最近想用webpack卻發現它已經更新到了4.1.x，於是遇到了幾個坑，也為了給想入門webpack的小夥伴提供個方便，重新寫一份入門指南。

什麼是webpack。

Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行代碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 SASS 等。

webpack是基於node.js環境的前端自動化打包工具，本文預設你已有一定使用node和npm安裝的基礎。

##安裝

1.1 webpack安裝

首先建立一個練習檔案夾demo，在檔案中開啟命令終端，輸入下列指令即可安裝webpack

//全域安裝

npm install -g webpack

//安裝到專案檔夾

npm install --save-dev webpack

安裝完之後，demo裡會多一個node_modules檔案夾。

接下來輸入

npm init

會自動建立package.json檔案。安裝的時候一路斷行符號即可，需要修改後面再進入package.json檔案編輯。

package.json檔案是webpack的骨架，在裡面可以看到各個關鍵節點，設定快捷命令等。

1.2 檔案夾部署

安裝好上面的東西，我們開始往demo檔案夾塞東西，建立dist，src檔案夾、webpack.config.js設定檔來類比開發環境。最終目錄如下：

demo                      //webpack的類比開發檔案夾   | - webpack.config.js  //配置webpack出入口、外掛程式、loader   | - node_modules   | - dist               //打包輸出檔案夾   | - src              //開發資源檔夾     | - webpack.js     //配置webpack引入資源     | - index.html     /*   基礎html檔案     | - index.js            基礎js檔案     | - index.css           基礎css檔案     | - index.scss          基礎scss檔案                 | - images              基礎圖片檔案夾   */         | - img1.png         | - img2.png

1.3 配置webpack.config.js

var path = require('path')var webpack = require('webpack')module.exports = {  // bundle入口  entry: ['./src/webpack'],  // bundle輸出  output: {    path: path.join(__dirname, 'dist'),    filename: 'bundle.js' //可重新命名  }}

運行

按上面步驟安裝後，運行

webpack

即可打包，我們可以看到dist檔案夾中產生了bundle.js，此時還未壓縮，大小為3k。

到了這裡，我們會看到webpack4.1.1 之後的版本 在命令列輸入webpack命令語句時並沒有如期的產生了bundle.js檔案，並且向你丟了個提示：

1 The CLI moved into a separate package:webpack-cli.2 Please install 'webpack-cli' in addition to webpack itself to use the CLI.3 ->when using npm: npm install webpack-cli -D4 ->when using yarn: yarn add webpack-cli -D

翻譯成中文：

CLI（命令列工具）已經轉移到了一個單獨的包webpack-cli中。 
除了webpack自身外，請額外安裝webpack-cli來使用CLI。 
-> 使用npm安裝：npm install webpack-cli -D 
->使用yarn安裝：yarn add webpack-cli -D

意思是，我們需要額外安裝webpack-cli，否則便不能在命令列中使用webpack的相關命令。

1.4 webpack4.1.1版本之後的安裝

//全域安裝

npm install -g webpack

npm install -g webpack-cli

//安裝到專案檔夾

npm install webpack -D

npm install webpack-cli -D

此處的 -D 就相當於之前的局部安裝命令語句：--save-dev

需要在全域安裝一次webpack-cli，舊版本的webpack中，webpack指令要能在命令列中使用，需要全域安裝webpack，而不是本地安裝，因此這裡的webpack-cli也應該是同理。本人嘗試過只在全域安裝webpack-cli而本地不安裝，也可以執行命令

安裝webpack-cli的同時也不要忘了像以前一樣安裝webpack

----------------------------------------------------------------------------------------------------------------

今天就先寫到這，往後的模組/外掛程式等設定與安裝來日再更新