前端工程化 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中文檔案

標籤：其他

上一篇：前端NEXT實踐系列：（一）ECMAScript 6.0技術堆疊

下一篇：Zwibbler—前端Canvas繪圖工具使用記錄