webpack核心概念

lordharrd 發布于2019-08-22 18:10 / 2015人閱讀

摘要：一核心概念二代碼入口打包入口單個或多個入口，多個入口多頁面應用程序或分開的。

一、webpack核心概念

1.Entry
2.Output
3.Loaders
4.Plugins

二、Entry

代碼入口

打包入口

單個或多個入口，多個入口：多頁面應用程序；或分開的。

示例：

// 單個
module.exports = {
    entry: "index.js"
}

// 多個入口
module.exports = {
    entry: ["index.js", "vendor.js"]
}

// 另外寫法，推薦寫法
module.exports = {
    entry: {
        index: "index.js"
    }
}

module.exports = {
    entry: {
        index: "index.js",
        vendor: "vendor.js"
    }
}

module.exports = {
    entry: {
        index: ["index.js", "app.js"],
        vendor: "vendor.js"
    }
}

三、Output

打包成的文件（bundle）
一個或多個
自定義規則

示例：

// 單個輸出
module.exports = {
    entry: {
        index: "index.js"
    },
    output: {
        filename: "index.min.js"
    },
}

// 多個輸出
module.exports = {
    entry: {
        index: "index.js",
        vendor: "vendor.js"
    },
    output: {
        filename: "[name].min.[hash:5].js"
    }
}

四、Loaders

1.處理文件
2.轉化為模塊

示例：

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: "css-loader"
            }
        ]
    }
}

五、Plugins

1.參與打包整個過程
2.打包優化和壓縮
3.配置編譯時的變量
4.極其靈活的

示例：

const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}

GPU云服務器云服務器 webpack _webpack webpack cdn webpack2

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95581.html

webpack 四個核心概念之Entry

摘要：因為是基于的一款工具，所以在學習過程中涉及到的知識也會進行解釋進行發散性拓展。最終返回給調用的是而不是。這里引用官網的一個例子請輸入代碼模塊代碼在這。在這個例子中，定義了一個函數。也就是說合并了多個文件的依賴模塊。因為webpack是基于nodejs的一款工具，所以在學習過程中涉及到的nodejs知識也會進行解釋進行發散性拓展。webpack中文文檔一、module.export...

Scliang 2019-08-23 18:04 評論0 收藏0
webpack從0到1超詳細超基礎學習教程

摘要：在進行的學習之前，第一步就是要讓大家認識一下中四個核心的概念。找到這個起始點，再從起始點出發來看依賴的文件，每個依賴都將被處理，最后輸出。概念自己是一個一聽到webpack就頭大，看著一堆不知道那是什么玩意的東西總覺得自己做好前端就行了，但是在使用vue-cli的時候總覺得要改其中的一些東西進行項目初始化的時候能夠更好使用！所以想要根據官方文檔進行一個webpack的教程，寫這些主...

douzifly 2019-08-29 15:31 評論0 收藏0
webpack從0到1超詳細超基礎學習教程

摘要：在進行的學習之前，第一步就是要讓大家認識一下中四個核心的概念。找到這個起始點，再從起始點出發來看依賴的文件，每個依賴都將被處理，最后輸出。概念自己是一個一聽到webpack就頭大，看著一堆不知道那是什么玩意的東西總覺得自己做好前端就行了，但是在使用vue-cli的時候總覺得要改其中的一些東西進行項目初始化的時候能夠更好使用！所以想要根據官方文檔進行一個webpack的教程，寫這些主...

Tychio 2019-08-22 17:34 評論0 收藏0
webpack從0到1超詳細超基礎學習教程

摘要：在進行的學習之前，第一步就是要讓大家認識一下中四個核心的概念。找到這個起始點，再從起始點出發來看依賴的文件，每個依賴都將被處理，最后輸出。概念自己是一個一聽到webpack就頭大，看著一堆不知道那是什么玩意的東西總覺得自己做好前端就行了，但是在使用vue-cli的時候總覺得要改其中的一些東西進行項目初始化的時候能夠更好使用！所以想要根據官方文檔進行一個webpack的教程，寫這些主...

niceforbear 2019-08-02 10:32 評論0 收藏0