前端工程化 Webpack基礎

前端工程化

• 模塊化 （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配置比較靈活且複雜，可查看babel中文文檔
• 配置舉例

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

摘要

更多配置可查看官方文檔

• webpack中文文檔
• babel中文文檔