webpack入門學習筆記02 —— 初始化一個webpack項目

1. 寫在前面

如今咱們就開始正式學習 webpack 了，webpack是幫助咱們打包編譯項目的，因此在正式開始以前，咱們須要初始化一個基於webpack的項目。

在本篇博客中，將會涉及到如下的知識點：

• 初始化一個基於webpack的項目
• 體會webpack的默認打包設置
• 自定義webpack的打包配置文件

2. 初始化一個基於webpack的項目

這一步簡單，咱們能夠使用 npm 或者 yarn 包管理工具來幫助咱們快速初始化一個項目，相信不少前端從事者對這兩個工具都不會陌生。因此這裏就進行深刻講解這兩款工具。

我習慣於使用 yarn ，因此能夠直接建立一個新的文件夾，而後在終端下運行命令 yarn init 便可初始化一個項目。在這一步可能會讓你輸入一些項目的基本信息，以下所示：

question name (test):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:

你根據本身的實際狀況輸入便可，固然也能夠一路回車，這樣會使用默認的選項初始化一個項目。

初始化完成以後，在該文件夾下，會生成一個 package.json 文件，這個文件記錄項目的基本信息，同時會記錄以後咱們安裝的第三方包。在後面的項目中，咱們還能夠在裏面定義一些腳本，幫助咱們管理項目，這在後面的博客中會提到。

項目初始化完成以後，咱們須要安裝兩個包，即 webpack 和 webpack-cli ，這兩個包就是用來打包編譯項目的。安裝的步驟很簡單，直接在終端下執行如下yarn命令便可：

yarn add webpack webpack-cli -D

說明一下：以上命令中的 -D 選項，代表這兩個包是開發依賴，項目上線的時候不須要這兩個包。

這兩個包安裝完成以後，這個基於webpack的項目也就建立好了，能夠繼續後續工做了。

3.體會webpack的默認打包設置

項目建立好以後，咱們能夠不對webpack進行配置便可進行使用，由於webpack有本身默認的配置。下面來體會一下它的默認配置。

在項目目錄中建立一個 src 目錄，用來存放項目代碼。在該目錄下建立一個 index.js 文件，注意必定是這個名字，這是webpack默認配置的要求。在該文件中，咱們使用node語法引入另一個文件 name.js ，代碼以下：

let myName = require("./name.js")
console.log(myName);

其中 name.js 文件中的代碼以下：

module.exports = "Allen Feng"

上面使用的是Node.js語法，若是使用瀏覽器來直接渲染的話，是不能成功渲染的。這個時候咱們能夠使用webpack進行打包編譯，直接在終端中運行命令 npx webpack ，稍微等待一會便可打包成功。

打包完成以後，觀察項目目錄，能夠看到這個時候多出一個文件夾 dist ，點進去以後能夠看到打包後的文件 main.js 。若是這個時候在 dist 文件夾下建立一個 html 文件，經過 script標籤 引入main.js文件即可以在瀏覽器的控制檯中看到打印出的 Allen Feng。

這就是使用 webpack 的默認配置打包出來的效果，總結一下，在webpack的默認配置中：

• src目錄下必定要有index.js文件，這是默認配置中指定的入口文件
• webpack打包編譯以後，會將最終的代碼放在 dist 文件夾下。若是沒有，就會建立該文件夾
• webpack默認打包模式是生產模式，即打包編譯後的代碼會被壓縮。

4.自定義webpack的打包配置文件

以上咱們已經使用webpack的默認配置對項目進行打包編譯，可是咱們可能會遇到這樣的需求：

• 我不想讓webpack從 index.js 文件開始打包，而是從 App.js 文件開始打包
• 打包編譯後的代碼不放在 dist 目錄下，而是其餘目錄
• 打包編譯後的代碼不要進行壓縮
• ......

這個時候，咱們就能夠自定義webpack的配置，來達到想要的效果。步驟很簡單，在項目的主目錄下（即和package.json同級）新建一個 webpack.config.js 文件，這是webpack的配置文件。在該文件中，能夠書寫如下代碼對webpack進行配置：

let path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: { 
        filename: "index.js",  
        path: path.resolve(__dirname, "dist")  
    }
}

如代碼所示，咱們能夠在配置文件中，指定webpack的打包模式、打包的入口文件、打包的出口文件等。下面對這三個配置選項作詳細的說明：

1) mode: webpack的配置模式

webpack有兩種配置模式：production（生產模式） 和 development（開發模式）。默認採用的是 生產模式，在該模式下，打包編譯後的代碼會被壓縮，節省體積。

若是選擇 開發模式 , 那麼最終的將不會被壓縮，文件的體積會稍大。

2) entry： webpack的入口文件

webpack進行打包編譯，確定要有一個指定的入口文件，這個文件即可以經過該屬性指定。默認的入口文件是 index.js 文件。若是要把它更改成其餘的文件，修改該屬性便可。注意這個屬性能夠使用 相對路徑 指定。

3) output： webpack的出口文件

webpack打包編譯後的代碼放在哪裏，是經過該屬性指定的。在配置該屬性的時候，要指定出口文件的 文件名 和 路徑 。默認的路徑是 dist 文件夾下的 index.js 文件。若是要修改成其餘的路徑和文件名，修改該屬性便可。要注意，出口文件的路徑配置要使用 絕對路徑 ，能夠參考我上面的寫法。

5. 後記

如今講完了webpack三個基本選項的配置，咱們就能夠根據本身的需求來進行配置。後續會介紹其餘的一些選項配置。你們加油！