WebPack使用核心概念

參考文件

webpack v4.44.1中文文件 https://www.webpackjs.com/concepts/
webpack v5.0.0-beta.24 https://webpack.js.org/concepts/

四個核心組成

• 入口 Entry
• 輸出 Output
• 載入解釋 Loaders
• 外掛 Plugins

加上

- 模式 Mode
- 瀏覽器相容性Browser Compatibility

示例

目錄結構

src
  |- index.js       // 入口檔案 引入了a.js a.less index.css
  |- a.js           // 示例js檔案
  |- a.less         // less檔案
  |- index.css      // 基礎css檔案
  |- index.html     // 模版檔案
 

webpack打包檔案格式webpack.config.js

/**
 *
 * webpack 簡單的配置
 * */
const path = require('path');  // 路徑操作相關包
const HtmlWebPackPlugin = require('html-webpack-plugin');  // 自動建立一個html檔案引入打包好的js檔案呢

module.exports = {
    devServer: {
        port: 8810, // 埠
        progress: true, // 打包進度條
        contentBase: './dist', // 以這這個資料夾為基礎路徑
        compress: true // 啟動壓縮
    },
    mode: 'development',  // 模式預設兩種 production 和 development
    entry: './src/index.js',  // 入口檔案
    output: {
        filename: 'main.js',   // 輸出檔名 main.[hash:5].js :5只顯示5位 也可以加hash戳 如生成main.c60ec6fba5da66bd8ce3.js 防止瀏覽器快取
        path: path.resolve(__dirname, 'dist'),  // 輸出路徑
    },
    // 陣列檔案 存放所有的webpack外掛
    plugins: [
        // 初始化模版html檔案
        new HtmlWebPackPlugin({
            template: './src/index.html',  // 模版檔案目錄
            filename: 'index.html',     //預設index.html  生成好的檔名(會自動引入打包好的js檔案)
            // 壓縮引數配置
            minify: {
                removeAttributeQuotes: true, // 移除引號
                // collapseWhitespace: true,   // 壓縮成一行
            },
            hash: true,  // 打包好的檔案帶hash戳 如 src=main.js?c60ec6fba5da66bd8ce3
        })
    ],
    // 模組檔案
    module: {
        // 打包的loader
        rules: [ // 規則， 可以有多個
            // 正則匹配檔案 css結尾的檔案
            // css-loader 可以相容 @import "a.css";這種語法
            // loader特點希望功能單一， 多個loader需要[]， 單個可以''使用
            // loader載入順序， 預設從右往左 還可以傳入引數 npm i css-loader style-loader -D
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader', // style-loader 記載到html
                        // 寫成物件形式就可以插入引數
                        options: {
                            // v4.44.1 中文文件有問題？報錯 https://www.webpackjs.com/loaders/style-loader/#insertat
                            // insertAt: 'top',
                            // 參考英文文件 https://webpack.js.org/loaders/style-loader/#insert
                            insert: function insertAtTop(element) {
                                let parent = document.querySelector('head');
                                let lastInsertedElement = window._lastElementInsertedByStyleLoader;
                                if (!lastInsertedElement) {
                                    parent.insertBefore(element, parent.firstChild);
                                } else if (lastInsertedElement.nextSibling) {
                                    parent.insertBefore(element, lastInsertedElement.nextSibling);
                                } else {
                                    parent.appendChild(element);
                                }
                                window._lastElementInsertedByStyleLoader = element;
                            },
                        }
                    },
                    // 處理引入問題 @import url()
                    'css-loader'
                ]
            },
            {
                // less打包loader
                test: /\.less$/,
                use: [
                    // 順序不能顛倒 預設從左到右
                    'style-loader',     // 處理css樣式
                    'css-loader',       // 處理引入問題 @import url(),
                    'less-loader',      // 處理less
                ]
            },
        ]
    }
};

 

由於使用了部分外掛和loader，所以需要安裝依賴

html-webpack-plugin         // 初始化html外掛
css-loader                  // 處理css引入等loader
less                        // 支援less語法外掛
less-loader                 // 處理less檔案打包loader
style-loader                // 處理css樣式打包loader

總結

webpack 官方文件，好多人在吐槽，我開始不以為意，知道我碰見了第一個坑loader中的insert
比起Python的FastAPI

基礎使用差不多就是這些內容，後面就是不用的外掛用法學習，用到到時候看文件(希望文件不要太坑)