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

概念

本身是一個一聽到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的其餘內容，能夠在下面留言，若是你們須要我會再出一個你們須要的教程，謝謝！