摘要：在進行的學習之前，第一步就是要讓大家認識一下中四個核心的概念。找到這個起始點，再從起始點出發來看依賴的文件，每個依賴都將被處理，最后輸出。

自己是一個一聽到webpack就頭大，看著一堆不知道那是什么玩意的東西總覺得自己做好前端就行了，但是在使用vue-cli的時候總覺得要改其中的一些東西進行項目初始化的時候能夠更好使用！所以想要根據官方文檔進行一個webpack的教程，寫這些主要還是為了進行一個系統的學習，幫助在webpack的道路上迷茫的同學們。

在進行webpack的學習之前，第一步就是要讓大家認識一下webpack中四個核心的概念。

1. 入口（entry）

相信這個字面意思大家都沒有問題，這個就是指定webpack的入口文件，指定其從什么地方開始。找到這個起始點，再從起始點出發來看依賴的文件，每個依賴都將被處理，最后輸出。

示例：

// webpack.config.js
module.exports = {
    entry: "./src/index.js"
}

上述代碼以及入口是簡單的配置，是一個簡單的單入口，是一種簡寫方式，具體的多入口配置方式如下。

示例：

// webpack.config.js
module.exports = {
    entry: {
        fistpage: "./src/index.js",
        nextpage: "./src/next.js",
        lastpage: "./src/last.js",
    }
}

2. 輸出（output）

有入口就肯定有出口，這里自然就是定義文件輸出的位置，以及輸出文件的名字和目錄，和入口一樣，你可以定義一個output段來配置文件的輸出。

當然，輸出的文件入口指定一個就可以了，區分的只是文件的名字即可，因此在這里只給大家介紹一種，輸入時候的名字是什么，則輸出的文件名字就是什么即可，只需要改filename為[name].js。

示例：

// webpack.config.js
const path = require("path")
module.exports={
    entry: "./src/index.js",
    output: {
        path: path.resolve(_dirname, "dist"),
        filename: "first-webpack.js"
    }
};

解釋一下上述代碼，首先我們先倒入一個nodejs一個操作文件路徑的核心模塊path，然后使用path進行文件路徑操作，將生成的文件存放在dist目錄，生成的文件名字為first-webpack.js。

3. loader

webpack本身只能夠理解一些js文件，但是loader可以做到讓其去處理一些非js文件，比如我們的css文件，圖片文件，loader可以將這些文件轉換成webpack能夠處理的有效模塊，所以因為它的存在，你import導入進來任何類型模塊。

示例：

// webpack.config.js
const path = require("path")
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(_dirname, "dist"),
        filename: "first-webpack.js"
    },
    module: {
        rules: [
            {test: /.txt$/, use: "raw-loader"}
        ]
    }
}

以上，在配置loader的時候，要新建一個module的對象，在其對象中來定義rules屬性，里面存在兩個必要的屬性，test和use，其中

test表示要使用loader進行轉換的一個或者一些文件，在這里是指被導入的模塊的后綴名為.txt文件

use則表示對于被導入的此類的文件，我們會使用raw-loader轉換一下，在進行打包

注：一定要注意此項配置是在module對象下的rules下進行配置

這里再做一個演示，比如我們平時在項目中使用css，但是前面也說了在webpack中可能不會識別css，因此這里要使用loader加載css文件，但是首先要安裝對應的loader進行加載css文件，這里使用css-loader，安裝命令

npm install --save-dev css-loader

然后在webpack中要配置，指定css文件使用css-loader加載

module.exports = {
    rules: [
        {test: /.css$/, use: "css-loader"}
    ]
}

還有其它的方式可以使用，作用是相同的，就是使用內聯或者cli

4. 插件（plugins）

loader是用來轉換某些類型的模塊，而插件則用來去執行更廣的任務，這個功能非常強大，可以用來處理各種任務。當然，使用方法也是很簡單，直接將npm安裝的插件通過require引入進來即可，然后在配置文件中將其添加進plugins數組中，也可以自定義，當然也可以一個插件使用其不同的功能多次使用，但是相應的你要new一個實例。

示例：

// webpack.config.js
const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(_dirname,"dist"),
        filename: "first-webpack.js"
    },
    module: {
        rules: [
            {test: /.txt$/, use: "raw-loader"}
        ]
    },
    plugins: [
        new webpack.optimize.UgifyJsPlugin(),
        new HtmlWebpackPlugin({template: "./src/index.html"})
    ]
}

當然，除了上述四個核心概念，這里還有一個配置，你可以配置不同的模式來進行webpack內置優化，可以選擇development或者production，配置不同的mode對應著不同的文件以及plugins插件進行相應的模式優化。

module.exports = {
    mode: "development"
}

想必大家肯定知道js或者自己熟悉的一些模塊，但是到底什么是webpack模塊相比還是比較陌生，webpack模塊主要的作用就是能夠使用各種方式表達自己和其他模塊的依賴關系。

比如：

import語句

require()語句

樣式文件的@import語句

url或者src的一些鏈接

可支持基本上各種模塊，比如我們ts，sass以及less文件等，允許各種技術使用webpack進行，在webpack中對于模塊的路徑有三種形式。

絕對路徑：import "/home/src/file"

相對路徑：import "./file"

模塊路徑：import "module"，這個特別說明一下，這里的模塊將會在resolve.modules指定目錄進行搜索

webpack還有一個重要的環節，就是依賴圖，在webpack中，一個文件依賴另一個文件，就稱為這兩個文件有著依賴關系，所以在用圖像資源的時候，我們可以為圖像與文件中間建立依賴關系，這樣在打包文件的時候，就能夠將圖片資源也能夠打包，可以使用import和require將圖片打包進來

這些用來我們入門webpack已經足夠了，當然webpack不僅僅是這些，還有著很多更高級的用法，但是這里僅僅是webpack的一個入門，讓大家能夠知道webpack的一些具體的作用，如果大家還想了解webpack的其他內容，可以在下面留言，如果大家需要我會再出一個大家需要的教程，謝謝！