webpack簡介

webpack 是一個用于現(xiàn)代 JavaScript 應用程序的 靜態(tài)模塊打包工具。當 webpack 處理應用程序時，它會在內(nèi)部從一個或多個入口點構(gòu)建一個 依賴圖(dependency graph)，然后將你項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態(tài)資源，用于展示你的內(nèi)容。

核心概念

• 入口(entry)
• 輸出(output)
• 模式(mode)
• loader
• 插件(plugin)
• 瀏覽器兼容性(browser compatibility)
• 環(huán)境(environment)

從0開始配置webpack項目

1. 項目基礎搭建/配置

mkdir -p webpack-dome
cd webpack-dome
// 初始化 packge.json
npm init
// 安裝 webpack 依賴
npm install webpack webpack-cli --save-dev

根目錄創(chuàng)建 index.html

新建 src，src/index.js

新建 webpack.config.js

const path = requere('path')

module.exports = {
    mode: 'development', // 讀取配置
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    }
}

基本配置完成，執(zhí)行 npm run build 即可 生成 /dist 打包后的文件夾

npm run build

實際開發(fā)中，需要一個 dev 開發(fā)環(huán)境，這就用到了 webpack-dev-server

npm install -D webpack-dev-server

webpack.config.js 添加 相應 配置

npm run start

現(xiàn)在服務起來了，但是沒有加載到index.html，因為打包中并沒有處理 idnex.html 文件，所以現(xiàn)在就需要 html-webpack-plugin 來處理 index.html 文件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './index.html'),
            filename: 'index.html'
        }),
    ],
}

好了，到這步配置的時候，基本的項目就已經(jīng)搭建起來了，我們實際的項目中，需要處理的東西有很多，比如es6/less等文件的轉(zhuǎn)換，這樣就需要使用 loader 和 plugin 了

2. loader
   在介紹loader之前，我們要搞清楚loader是什么，為什么會需要 loader。

loader 用于對模塊的源代碼進行轉(zhuǎn)換。loader 可以使你在 import 或 "load(加載)" 模塊時預處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(task)”，并提供了處理前端構(gòu)建步驟的得力方式。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript 或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS 文件！

loader的設計原則

• 職責單一：每個loader 只做一件事
• 鏈式調(diào)用：第一個loader接收到的是源文件的內(nèi)容，后續(xù)loader都是接收到的是上一個loader 返回的處理結(jié)果，webpack 會按順序鏈式調(diào)用每個 loader
• 統(tǒng)一原則：遵循 Webpack 制定的設計規(guī)則和結(jié)構(gòu)，輸入與輸出均為字符串，各個 Loader 完全獨立，即插即用
• 無狀態(tài)：在多次模塊的轉(zhuǎn)化之間，我們不應該在 loader 中保留狀態(tài)。每個 loader 運行時應該確保與其他編譯好的模塊保持獨立，同樣也應該與前幾個 loader 對相同模塊的編譯結(jié)果保持獨立

好了，上面介紹完了loader，現(xiàn)在咱們手寫一個 loader，其實每個 laoder 就是 webpack 中的一個獨立的代碼塊，說白了就是一個函數(shù)

// replaceLoader.js
// 字符串替換
module.exports = function (source) {
    // this.query 可讀取 webpack 配置 參數(shù)
    return source.replace('world', 'webpack')
}

loader 創(chuàng)建好了，現(xiàn)在我們只需要在 webpack.config.js 配置文件中使用就好了

module.exports = {
    ...
    module: {
    rules: [
      {
        test: /\.js$/,
        use: path.resolve(__dirname, './replaceLoader.js'),
      }
    ]
  },
}

當我們再啟動文件時候，打印出來的就是 替換后的 日志了。
當然在我們實際的開發(fā)中，可能會需要 對 loader 添加一些 參數(shù)，讓 loader 讀取 我們的 配置

use: [
  {
    loader: path.resolve(__dirname, './replaceLoader.js'),
    options: {
      name: 'webpack-query'
    }
  }
]

3. plugin

插件 是 webpack 的 支柱 功能。Webpack 自身也是構(gòu)建于你在 webpack 配置中用到的 相同的插件系統(tǒng) 之上！插件目的在于解決 loader 無法實現(xiàn)的其他事。

plugin是一個具有 apply 方法的 JavaScript 對象。apply 方法會被 webpack compiler 調(diào)用，并且在 整個 編譯生命周期都可以訪問 compiler 對象。

// 自定義 plugin
const pluginName = 'ConsoleLogWebpackPlugin'

class ConsoleLogWebpackPlugin {
    apply(compiler) {
        compiler.hooks.compile.tap(pluginName, (compilation) => {
            console.log('====================================');
            console.log('webpack plugin 生效了');
            console.log('====================================');
        })
    }
}

module.exports = ConsoleLogWebpackPlugin