webpack從0到1超詳細超基礎學習教程

fe_notebook發表於2018-05-27
Web

前言

對於webpack，自己是一個一聽到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，其中

  1. test表示要使用loader進行轉換的一個或者一些檔案，在這裡是指被匯入的模組的字尾名為.txt檔案
  2. 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模組主要的作用就是能夠使用各種方式表達自己和其他模組的依賴關係。

比如：

  1. import語句
  2. require()語句
  3. 樣式檔案的@import語句
  4. url或者src的一些連結

可支援基本上各種模組，比如我們ts，sass以及less檔案等，允許各種技術使用webpack進行，在webpack中對於模組的路徑有三種形式。

  1. 絕對路徑：import "/home/src/file"
  2. 相對路徑：import "./file"
  3. 模組路徑：import "module"，這個特別說明一下，這裡的模組將會在resolve.modules指定目錄進行搜尋

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

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

相關文章