認識Webpack概念

本篇文章旨在讓同窗們瞭解Webpack的基本概念和使用方法。講解的也會淺顯易懂。

前言

在前端模塊化開發的今天，咱們在工做中常常會接觸到一些編譯構建工具，如Parcel（極速零配置Web應用打包工具），Rollup（新一代JavaScript模塊打包器），Gulp（基於流的自動化構建工具），Webpack（JavaScript應用程序的靜態模塊打包工具）等等。這其中Webpack是用戶量最龐大的一個。咱們在開發Vue或React項目的時候都會接觸到Webpack的配置狀況。因此學好這項技術對咱們的前端發展是有幫助的。

概念

本質上，Webpack是一個現代JavaScript應用程序的靜態模塊打包器(module bundler)。當 Webpack處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個bundle。

在開始學習以前，咱們先理解四個核心概念：

• entry（入口）
• output（輸出）
• loader
• plugins（插件）

module.exports = {
    entry:'./index',
    // webpack打包入口文件
    output: {
        path: path.resolve(__dirname, "dist"), // string
        // 全部輸出文件的目標路徑
        filename: "[chunkhash].js", // string
        // 輸出的文件名稱
        publicPath: "/assets/", // string
        // 構建文件的輸出目錄，可不輸入。
    },
    module: {
        rules: [
            {
                test: /\.js$/, // RegExp | string
                loader: 'babel-loader', // 模塊上下文解析
                include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]  // 和test同樣，必須匹配選項
           }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './dist/index.html', // 將HTML寫入的文件。默認爲index.html
            template: 'index.html', // webpack模板的相對或絕對路徑
            inject: true, // true或'body'全部javascript資源都將放置在body元素的底部。'head'會將腳本放置在head元素中
            minify: { // 控制是否以及以何種方式最小化輸出
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // ...
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency'
        })
    ]
}
複製代碼

核心概念

1.entry

單入口寫法：entry: string | Array<string>

module.exports = {
    entry: './src/index.js'
}
複製代碼

多入口寫法：entry: {[entryChunkName]: string} | Array<string>

module.exports = {
    entry: {
        app: './src/app.js',
        admin: './src/admin.js'
    }
}
複製代碼

2.oupput

配置output選項能夠控制webpack如何向硬盤寫入編譯文件。注意，即便能夠存在多個入口起點，但只指定一個輸出配置。

在webpack中配置output屬性的最低要求是，將它的值設置爲一個對象，包括如下兩點：

• filename 用於輸出文件的文件名。
• 目標輸出目錄 path 的絕對路徑。

module.exports = {
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    }
}
複製代碼

若是是多入口，output 的寫法可使用佔位符(substitutions)來確保每一個文件具備惟一的名稱。

module.exports = {
    entry: {
        app: './src/app.js',
        admin: './src/admin.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}
複製代碼

3.loaders

咱們先理解一下概念：loader用於對模塊的源代碼進行轉換。loader可使你在import或"加載"模塊時預處理文件。所以loader相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。loader能夠將文件從不一樣的語言（如 TypeScript）轉換爲JavaScript，或將內聯圖像轉換爲 data URL。loader甚至容許你直接在JavaScript模塊中 import CSS文件！

module.exports = {
    entry: './src/index.js' ,
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /.less$/, // 匹配使用此loader的文件
                use: [  // 使用的loader名稱
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240
                        }
                    }
                ]
            }
        ]
    }
}

複製代碼

經常使用的loaders包括：

名稱	描述
babel-loader	轉換ES5，ES6，ES7等JS新特性語法
style-loader	將模塊導出做爲樣式添加到DOM
css-loader	用解析後的導入加載CSS文件並返回CSS代碼
less-loader	將LESS文件編譯爲CSS文件
ts-loader	將TS代碼轉換爲JS代碼
file-loader	將文件打包進對應的目錄，並返回相對的地址
url-loader	相似file-loader,若是文件小於限制的大小，能夠返回數據的DataURL

4.plugins

插件用於打包文件的優化，資源管理和環境變量的注入。做用於整個構建過程。插件的目的在於解決loader沒法實現的其它事情

const HtmlWebpackPlugin = require('html-webpack-plugin'); //經過 npm 安裝
const webpack = require('webpack'); //訪問內置的插件

module.exports = {
    entry: './src/index.js' ,
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/, 
                use: [  
                    'babel-loader',
                ]
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}
複製代碼

經常使用的plugins包括：

名稱	描述
CommonsChunkPlugin	將chunks相同的代碼提取成公共js
cleanWebpackPlugin	清理構建的目錄
HtmlWebpackPlugin	建立html文件去承載你build後的js
UglifyjsWebpackPlugin	插件使用uglify-js來壓縮代碼
HotModuleReplacementPlugin	啓用熱更新模塊，也就是HMR
DllPlugin	爲了極大減小構建時間，進行分離打包
ZipWebpackPlugin	將打出的資源生成一個zip包
TerserPlugin

5.mode

mode用來指定當前的構建環境是：production，development，或者是none。 設置mode可使⽤webpack內置的函數，其默認值爲production。

選項	描述
production	設置process.env.NODE_ENV的值爲production,啓用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin
development	設置process.env.NODE_ENV的值爲development,啓用NamedChunksPlugin和NamedModulesPlugin
none	不開啓任何優化選項

6.熱更新機制

module.exports = {
    ... ,
     devServer: {
        contentBase: './dist',
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}
複製代碼

總結

這裏介紹了Webpack的入門實踐。但願能夠幫助到你們理解相關的概念。最近看知乎看到一句話挺有意思的。分享一下，原話是：「計算機教會我不少原理，我卻用它來更好的生活」。