圖解Webpack之基礎篇

作者：前端點線面 2021-09-06 06:45:06

開發前端

本節主要用于入門webpack，首先用一張利用MindMaster繪制思維導圖開篇來闡述本文的主要內容，讀者可在此基礎上進行擴展自己的思維導圖。

[[421849]]

本節主要用于入門webpack，首先用一張利用MindMaster繪制思維導圖開篇來闡述本文的主要內容，讀者可在此基礎上進行擴展自己的思維導圖。

一、Entry

定義：指示webpack應該使用哪個模塊，來作為構建其內部依賴圖的開始。(從入口開始，搜尋并遞歸解析出所有入口依賴的模塊)

1.1 單入口

對于單入口文件，其值為string類型，打包形成一個chunk，輸出一個bundle文件。

module.exports = { 
    entry: './src/index.js' 
}

1.2 多入口

輸入為一個數組，但是入口文件最終只會形成一個chunk，輸出出去只有一個bundle文件。

module.exports = { 
    entry: ['./src/index.js','./src/add.js'] 
}

輸入為對象，有幾個入口文件就形成幾個chunk，輸出幾個bundle1文件

module.exports = { 
    entry: { 
        index: './src/index.js', 
        add: './src/add.js', 
    } 
}

1.3 動態入口

輸入為一個函數(同步或異步)，用于動態的返回上面所需的入口內容。

module.exports = { 
    entry: () => new Promise((resolve) => resolve(['./src/index.js','./src/add.js'])) 
}

二、Output

指示webpack如何去輸出、以及在哪里輸出你的bundle、asset 和其他你所打包或使用 webpack載入的任何內容。

2.1 名稱

對于輸出的名字，常用的主要有兩類:filename(輸出bundle名稱)和chunkFilename(非入口chunk名稱)。

filename(配置輸出文件的名稱，為string類型)

module.exports = { 
    //文件名稱（指定名稱+目錄） 
    filename: '[name].js' 
}

chunkFilename(配置非入口chunk的名稱)

對于非入口文件，產生方式有兩種：方式一是通過import語法會將一個文件單獨分割成一個chunk;方式二是利用optimization將node_modules分割成chunk。(見后續博客)

module.exports = { 
    //非入口chunk名稱 
    chunkFilename: '[name]_chunk.js' 
}

2.2 路徑

對于配置的輸出路徑，常用的主要有兩個：path和publicPath。

path(配置輸出文件存放的目錄，必須是string類型的絕對路徑)

module.exports = { 
 
path: path.resolve(__dirname, 'dist_[hash]') 
 
}

publicPath(所有資源引入公共路徑前綴)

module.exports = { 
    publicPath: 'https://cdn.example.com/' 
}

2.3 輸出庫

當用webpack去構建一個可以被其它模塊導入使用的庫時，需要用到libraryTarget和library。其中libraryTarget配置何種方式導出庫;library配置導出庫名稱。

module.exports = { 
    library: '[name]', 
    libraryTarget: 'window',//var、assign、this、window、global、commonjs、commonjs2、amd、umd…… 
}

三、Loader

webpack只能理解JavaScript和JSON文件，通過loader讓webpack能夠去處理其它類型的文件，并將它們轉換為有效模塊，以供應用程序使用，以及被添加到依賴圖中。

3.1 樣式資源

對于css和less這樣的樣式資源，webpack不能直接進行處理，所以需要經過webpack翻譯后才可以使用。此外不同瀏覽器對CSS的支持不同，為了CSS解決兼容性問題，可借助postcss-loader進行處理。

module.export = { 
    …… 
    module: { 
        rules: [ 
            { 
                test: /\.css$/, 
                use: [ 
                    //創建style標簽，將js中的樣式資源插入到html文件中。 
                    'style-loader', 
                    // 將css文件變成commonjs模塊加載到js中 
                    'css-loader', 
                    'postcss-loader', 
                ] 
            }, 
            { 
                test: /\.less$/, 
                use: [ 
                    'style-loader', 
                    'css-loader', 
                    // 將less文件編譯成css文件 
                    'less-loader', 
                ] 
            } 
        ] 
    } 
}

3.2 圖片資源

對于圖片資源來說，主要可以分為html中圖片和非html中圖片。對于url-loader或file-loader能夠處理js、css等中的圖片資源，但是不能直接處理html中的圖片資源，所以需要引用html-loader，負責引入img，從而能被url-loader進行處理。

module.exports = { 
    module: { 
        rules: [ 
            { 
                test: /\.(png|jpg|gif)$/, 
                loader: 'url-loader', 
                options: { 
                    limit: 8 * 1024, 
                    name: '[hash:10].[ext]', 
                    outputPath: 'asset/images' 
                } 
            }, 
            { 
                test: /\.html/, 
                loader: 'html-loader', 
            }, 
        ] 
    } 
}

3.3 js文件

因為每個人寫代碼的風格不同，為了統一js文件的風格，規范代碼，可以采用eslint-loader進行處理。

module.exports = { 
    …… 
    module: { 
        rules: [ 
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                // 優先執行 
                enfore: 'pre', 
                loader: 'eslint-loader', 
                options: { 
                    // fix: true 
                } 
            } 
        ] 
    } 
}

此處可以用比較權威的Airbnb來進行語法檢查，需要在package.json中添加:

"eslintConfig": { 
    "extends": "airbnb-base", 
    "env": { 
      "browser": true 
    } 
}

不同瀏覽器對js代碼的支持性不同，所以需要對js代碼進行兼容性處理，可以利用babel-loader，配置方式主要有三種：

(1) 基本js兼容性處理-->@babel/preset-env

問題：只能轉換基本語法，如Promise不能轉換

(2)全部js兼容性處理--> @babel/polyfill

對于這個文件，只需要在js文件中直接引入即可 import '@babel/polyfill'; 這會將js有兼容性的東西全部帶進來。

問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，導致文件體積太大了

(3)需要做兼容性處理的就做：按需加載 --> core-js

此時要把第二種方案的代碼注釋掉。

module.exports = { 
    …… 
    module: { 
        rules: [ 
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader', 
                options: { 
                    // 預設：指示babel做怎么樣的兼容性處理 
                    presets: [ 
                        '@babel/preset-env', 
                        { 
                            // 按需加載 
                            useBuiltIns: 'usage', 
                            // 指定core-js版本 
                            corejs: { 
                                version: 3 
                            }, 
                            // 指定兼容性做到哪個版本瀏覽器 
                            targets: { 
                                chrome: '60', 
                                firefox: '60', 
                                edge: '17', 
                                safari: '10', 
                            } 
                        } 
                    ] 
                } 
            } 
        ] 
    } 
}

3.4 其它資源

對于不需要進行優化、壓縮等進行處理的文件，例如字體圖標、SVG等，可以直接被引入使用，這個時候用file-loader直接處理即可。

module.exports = { 
    module: { 
        rules: [ 
            { 
                exclude: /\.(css|js|html|less|jpg|png|gif)$/, 
                loader: 'file-loader', 
                options: { 
                    name: '[hash:10].[ext]', 
                } 
            } 
        ] 
    } 
}

四、Plugin

插件目的是解決loader無法實現的其他事，可用于執行范圍更廣的任務，為webpack帶來很大的靈活性。

4.1 HTML文件

為了簡化HTML文件的創建，方便為webpack包提供服務，所以可以利用html-webpack-plugin插件。通過利用該插件可以自動引入JS、CSS等文件，可以對HTM代碼進行壓縮;此外，該插件還可以利用提供的HTML模板。

module.exports = { 
    plugins: [ 
        // html-webpack-plugin插件，默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS、CSS） 
        new HtmlWebpackPlugin({ 
            // 需要有結構的HTML文件，可以通過配置template，復制該html文件，并自動引入自動引入打包輸出的所有資源（JS、CSS） 
            template: './src/index.html', 
            // 壓縮html代碼 
            minify: { 
                // 移除空格 
                collapseWhitespace: true, 
                // 移除注釋 
                removeComments: true, 
            } 
        }) 
    ], 
}

4.2 CSS文件

對于CSS文件，利用插件主要需要處理三個方面：提取CSS文件、兼容性處理(配合postcss-loader)和對CSS文件進行壓縮。

提取CSS文件：mini-css-extract-plugin

兼容性處理：post-preset-env

壓縮：optimize-css-assets-webpack-plugin

module.exports = { 
    …… 
    module: { 
        rules: [ 
            { 
                test: /\.css$/, 
                use: [ 
                    // 'style-loader', 
                    MiniCssExtractPlugin.loader,// 用這個loader取代style-loader。作用：提取js中的css成單獨文件 
                    'css-loader', 
                    { 
                        loader: 'postcss-loader', 
                        options: { 
                            ident: 'postcss', 
                            plugins: () => [ 
                                require('postcss-preset-env')() 
                            ] 
                        } 
                    } 
                ] 
            }, 
        ] 
    }, 
    plugins: [ 
        new MiniCssExtractPlugin({ 
            // 對輸出的css文件進行重命名 
            filename: 'css/[name].css' 
        }), 
        // 壓縮css 
        new OptimizeCssAssetsWebpackPlugin(), 
    ] 
}

五、Mode

指示wenpack使用相應模式進行配置。

選項	描述
development	會將 DefinePlugin 中 process.env.NODE_ENV 的值設置為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。
production	會將 DefinePlugin 中 process.env.NODE_ENV 的值設置為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。
none	退出任何默認優化選項

本文轉載自微信公眾號「前端點線面」，作者前端點線面。轉載本文請聯系前端點線面公眾號。

責任編輯：武曉燕來源：前端點線面