前端工程化

• 模塊化 （js模塊化，css模塊化，其他資源模塊化）
• 組件化 （復用現(xiàn)有的UI結構、樣式、行為）
• 規(guī)范化 （目錄結構的劃分、編碼規(guī)范化、接口規(guī)范化、文檔規(guī)范化、Git分支管理）
• 自動化 （自動化構建、自動部署、自動化測試）

webpack

• 前端項目工程化的具體解決方案
• 提供友好的前端模塊化開發(fā)支持，以及代碼壓縮混淆、處理js兼容性、性能優(yōu)化等強大功能

安裝

• 初始化項目
  npm init -y
• 安裝
  npm install webpack webpack-cli --save-dev
• 根目錄創(chuàng)建webpack配置文件 webpack.config.js

// webpack.config.js
module.exports = {
    ...
}

webpack.config.js 配置

1.mode模式

• development
  • 開發(fā)環(huán)境
  • 不會對打包生成的文件進行代碼壓縮和性能優(yōu)化
  • 打包速度快
• production
  • 生產環(huán)境
  • 會對打包生成的文件進行代碼壓縮和性能優(yōu)化
  • 打包速度慢

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加載器處理完成后才能進行打包

站在用戶的角度思考問題，與客戶深入溝通，找到德江網(wǎng)站設計與德江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、雅安服務器托管、企業(yè)郵箱。業(yè)務覆蓋德江地區(qū)。

3-1. less, css等樣式文件處理

• 依賴安裝 npm install style-loader css-loader less-loader --save-dev
• rules配置添加規(guī)則: 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參數(shù)：limit指定圖片大小，單位為Byte，<=limit大小圖片，才會被轉為base64格式圖片
• 參數(shù)配置為url參數(shù)與與options對象兩種形式

module.exports = {
    rules: [
        // url參數(shù)形式配置
        { test: /\.jpg|png|gif$/, use: 'url-loader?limit=' },
        // url參數(shù)options形式配置
        {
            test: /\.jpg|png|gif$/,
            use: {
                loader: 'url-loader',
                options: { 
                    limit: ,
                    outputPath: 'image'       // 明確指定打包生成的圖片文件存放到dist目錄下的image文件夾中
                }
            }
        },
        // 字體文件
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: {
                loader: 'url-loader',
                options: { limit:  }
            }
        },
        // 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: {
                    // 設置預定義環(huán)境
                    presets: [
                        [
                            '@babel/preset-env',    // 指定環(huán)境的插件
                            // 配置信息
                            {
                                // 兼容的瀏覽器目標版本
                                targets: {
                                    'chrome': '58',
                                    'ie': '11'
                                },
                                // 指定core.js版本
                                'corejs': '3',
                                // 使用corejs方式 'usage':按需加載
                                'useBuiltIns': 'usage'
                            }
                        ]
                    ]
                }
            }
        }
    ]
}

4.webpack-dev-server

• webpack 開發(fā)環(huán)境http服務器
• 安裝 npm install webpack-dev-server --save-dev
• package.json配置scripts

"scripts": {
    "dev": "webpack serve"
}

• 啟動 npm run dev
• webpack配置文件devServer節(jié)點

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節(jié)點引入

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 使"運行報錯的行數(shù)"與”源代碼行數(shù)“保持一致，但性能較低
    devtool: 'eval-source-map'
}

• 實踐建議
  • 開發(fā)環(huán)境建議設置為 eval-source-map，可以精準定位到具體的錯誤行
  • 生成環(huán)境建議關閉sourceMap，或者設置值為 nosources-source-map，防止源碼泄露，提高安全性

打包發(fā)布

• package.json配置scripts

"scripts": {
    "build": "webpack --mode production"
}

• 打包 npm run build

摘要

更多配置可查看官方文檔

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