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

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

在進(jìn)行webpack的學(xué)習(xí)之前，第一步就是要讓大家認(rèn)識一下webpack中四個核心的概念。

1. 入口（entry）

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

示例：

// 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段來配置文件的輸出。

當(dāng)然，輸出的文件入口指定一個就可以了，區(qū)分的只是文件的名字即可，因此在這里只給大家介紹一種，輸入時候的名字是什么，則輸出的文件名字就是什么即可，只需要改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進(jìn)行文件路徑操作，將生成的文件存放在dist目錄，生成的文件名字為first-webpack.js。

3. loader

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

示例：

// 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進(jìn)行轉(zhuǎn)換的一個或者一些文件，在這里是指被導(dǎo)入的模塊的后綴名為.txt文件

use則表示對于被導(dǎo)入的此類的文件，我們會使用raw-loader轉(zhuǎn)換一下，在進(jìn)行打包

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

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

npm install --save-dev css-loader

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

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

還有其它的方式可以使用，作用是相同的，就是使用內(nèi)聯(lián)或者cli

4. 插件（plugins）

loader是用來轉(zhuǎn)換某些類型的模塊，而插件則用來去執(zhí)行更廣的任務(wù)，這個功能非常強大，可以用來處理各種任務(wù)。當(dāng)然，使用方法也是很簡單，直接將npm安裝的插件通過require引入進(jìn)來即可，然后在配置文件中將其添加進(jìn)plugins數(shù)組中，也可以自定義，當(dāng)然也可以一個插件使用其不同的功能多次使用，但是相應(yīng)的你要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"})
    ]
}

當(dāng)然，除了上述四個核心概念，這里還有一個配置，你可以配置不同的模式來進(jìn)行webpack內(nèi)置優(yōu)化，可以選擇development或者production，配置不同的mode對應(yīng)著不同的文件以及plugins插件進(jìn)行相應(yīng)的模式優(yōu)化。

module.exports = {
    mode: "development"
}

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

比如：

import語句

require()語句

樣式文件的@import語句

url或者src的一些鏈接

可支持基本上各種模塊，比如我們ts，sass以及l(fā)ess文件等，允許各種技術(shù)使用webpack進(jìn)行，在webpack中對于模塊的路徑有三種形式。

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

相對路徑：import "./file"

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

webpack還有一個重要的環(huán)節(jié)，就是依賴圖，在webpack中，一個文件依賴另一個文件，就稱為這兩個文件有著依賴關(guān)系，所以在用圖像資源的時候，我們可以為圖像與文件中間建立依賴關(guān)系，這樣在打包文件的時候，就能夠?qū)D片資源也能夠打包，可以使用import和require將圖片打包進(jìn)來

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