前端工程化 Webpack基礎

清晨細雨fei發表於2022-03-29
前端Web

前端工程化

  • 模組化 （js模組化，css模組化，其他資源模組化）
  • 元件化 （複用現有的UI結構、樣式、行為）
  • 規範化 （目錄結構的劃分、編碼規範化、介面規範化、文件規範化、Git分支管理）
  • 自動化 （自動化構建、自動部署、自動化測試）

webpack

  • 前端專案工程化的具體解決方案
  • 提供友好的前端模組化開發支援，以及程式碼壓縮混淆、處理js相容性、效能優化等強大功能

安裝

  • 初始化專案
    npm init -y
  • 安裝
    npm install webpack webpack-cli --save-dev
  • 根目錄建立webpack配置檔案 webpack.config.js
// webpack.config.js
module.exports = {
    ...
}

webpack.config.js 配置

1.mode模式

  • development
    • 開發環境
    • 不會對打包生成的檔案進行程式碼壓縮和效能優化
    • 打包速度快
  • production
    • 生產環境
    • 會對打包生成的檔案進行程式碼壓縮和效能優化
    • 打包速度慢
module.exports = {
    mode: 'development'
}

2.出入口檔案

  • entry 打包檔案入口，預設為：src/index.js
  • output 打包檔案輸出，預設為： dist/main.js
const path = require('path')
module.exports = {
    entry: path.join(__dirname, './src/index.js'),   // 入口檔案
    output: {
        path: path.join(__dirname, './dist'),        // 輸出目錄
        filename: 'bundle.js'                        // 輸出檔案
    }
}

3.loader載入器

webpack檔案載入器，webpack預設只能打包處理.js檔案，其他非.js字尾檔案需要loader載入器處理完成後才能進行打包

3-1. less, css等樣式檔案處理

  • 依賴安裝 npm install style-loader css-loader less-loader --save-dev
  • rules配置新增規則: test表示匹配檔案型別，use表示要呼叫的loader，呼叫順序為從後往前
module.exports = {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },    // css檔案處理
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },    // less檔案處理
    ]
}

3-2. url路徑相關檔案處理，如圖片、字型檔案、csv、xml檔案等

  • 依賴安裝 npm install url-loader file-loader csv-loader xml-loader --save-dev
  • url-loader引數：limit指定圖片大小，單位為Byte，<=limit大小圖片，才會被轉為base64格式圖片
  • 引數配置為url引數與與options物件兩種形式
module.exports = {
    rules: [
        // url引數形式配置
        { test: /\.jpg|png|gif$/, use: 'url-loader?limit=10000' },
        // url引數options形式配置
        {
            test: /\.jpg|png|gif$/,
            use: {
                loader: 'url-loader',
                options: { 
                    limit: 10000,
                    outputPath: 'image'       // 明確指定打包生成的圖片檔案存放到dist目錄下的image資料夾中
                }
            }
        },
        // 字型檔案
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: {
                loader: 'url-loader',
                options: { limit: 10000 }
            }
        },
        // csv檔案
        {
            test: /\.(csv|tsv)$/i,
            use: {
                loader: 'csv-loader'
            }
        },
        // xml檔案
        {
            test: /\.xml$/i,
            use: {
                loader: 'xml-loader'
            }
        }
    ]
}

3-3. js高階語法處理

  • 依賴安裝 npm install ... --save-dev
名稱 描述
@babel/core babel核心工具
@babel/preset-env babel預定義環境
babel-loader babel載入器，編譯js檔案用
core-js 使老版本瀏覽器相容新版ES語法 
module.exports = {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    // 設定預定義環境
                    presets: [
                        [
                            '@babel/preset-env',    // 指定環境的外掛
                            // 配置資訊
                            {
                                // 相容的瀏覽器目標版本
                                targets: {
                                    'chrome': '58',
                                    'ie': '11'
                                },
                                // 指定core.js版本
                                'corejs': '3',
                                // 使用corejs方式 'usage':按需載入
                                'useBuiltIns': 'usage'
                            }
                        ]
                    ]
                }
            }
        }
    ]
}

4.webpack-dev-server

  • webpack 開發環境http伺服器
  • 安裝 npm install webpack-dev-server --save-dev
  • package.json配置scripts
"scripts": {
    "dev": "webpack serve"
}
  • 啟動 npm run dev
  • webpack配置檔案devServer節點
module.exports = {
    devServer: {
        open: true,             // npm run dev後，自動開啟瀏覽器
        host: '127.0.0.1',      // 主機地址
        port: 8080              // 埠號，預設為8080
    }
}

5.外掛

  • html-webpack-plugin 自定義輸出index.html內容，會將打包好的bundle.js自動注入index.html的底部
    • 安裝 npm install html-webpack-plugin --save-dev
    • plugins節點引入
const HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'   // 指定入口自定義的html檔案
        })
    ]
}
  • clean-webpack-plugin 打包時自動清理dist目錄舊檔案外掛
    • 安裝 npm install clean-webpack-plugin --save-dev
    • 引入
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

6.SourceMap

  • 儲存程式碼壓縮混淆前後的對應關係檔案
  • 程式碼出錯時，可以通過對應關係，直接顯示原始程式碼出錯位置，方便後期除錯
  • sourceMap選項很多，具體可參考webpack devtool sourcemap
  • 常用選項為: source-map inline-source-map eval-source-map
module.exports = {
    // eval-source-map 使"執行報錯的行數"與”原始碼行數“保持一致，但效能較低
    devtool: 'eval-source-map'
}
  • 實踐建議
    • 開發環境建議設定為 eval-source-map，可以精準定位到具體的錯誤行
    • 生成環境建議關閉sourceMap，或者設定值為 nosources-source-map，防止原始碼洩露，提高安全性

打包釋出

  • package.json配置scripts
"scripts": {
    "build": "webpack --mode production"
}
  • 打包 npm run build

摘要

更多配置可檢視官方文件

相關文章