webpack學習筆記1

legendaryedu 發布于2019-08-23 13:46 / 865人閱讀

摘要：頭部資源終將占據統治地位，成為前端項目構建工具的頭部資源。模塊化編程模塊的概念是將程序拆解為離散的功能塊，通常稱這些功能塊為模塊。模塊相對于程序而言，具有更小的體積，單個模塊具有清晰的目的，方便進行開發測試維護等工作。

webpack作用

webpack可以將前端工程中所有的靜態資源打包成為一個或者多個js，靜態資源包括css、圖片等。

為什么要使用webpack，沒有打包工具之前，頁面之中使用ES6、SCSS、TypeScript等瀏覽器不支持的前端新語法的時候都非常困難，有了webpack就可以非常方便的在項目之中使用這些新的語法，從而提升前端項目開發的速度和質量。另外在webpack之中項目中所有的資源都是模塊，包括js，還包括css、圖片等等。只要有合適的loader去處理這些靜態資源就可以了。webpack還提供了插件的功能，豐富了webpack的功能。以上的這些讓webpack成為前端項目構建工具的主流和首選，gulp和grunt可能成為了歷史。頭部資源終將占據統治地位，webpack成為前端項目構建工具的頭部資源。

模塊化編程

模塊的概念是將程序拆解為離散的功能塊，通常稱這些功能塊為模塊。模塊相對于程序而言，具有更小的體積，單個模塊具有清晰的目的，方便進行開發、測試、維護等工作。模塊的功能經過了抽象，提高了代碼的復用能力。

模塊的打開姿勢

webpack支持常見的模塊依賴，如es5的import，commonjs的require，css文件的@import，樣式中的url。webpack能夠支持的模塊有webpack常見的loader

webpack核心概念 entry 入口文件

webpack是通過遞歸的方式來找出所有依賴之間的關系，并構建依賴圖。需要在配置文件中指定使用哪個模塊作為依賴圖的起始，進入起始依賴后就可以根據起始模塊中指定的依賴來將其他依賴將入進來。多個入口匹配單一輸出：entry:"./src/script/main.js"，在main.js之中可以使用require或者其他方法例如import來導入其他的文件。
module.export = {entry:"./index.js"}

當存在多個入口的時候呢，可以使用entry:[]的形式。
多個入口文件匹配多個輸出結果：entry必須采用對象的方式，這樣可以使用對象的key作為出口文件的文件名。并在不同的文件中使用這些不同的輸出。示例：entry：{page1:"a.js",page2:"b.js"}，output:{path:"輸出結果的絕對路徑",filename:[name].js}這里必須使用占位符來達到生成不同文件的效果，為了顯示多次輸出的不同版本號可以使用[hash]占位符。
hash值采用md5算法，即根據文件中內容來改變。

output 輸出文件

output指定了最終要將打包好的js放在什么路徑下，默認是dist。路徑指定的是絕對路徑，需要通過nodejs的path模塊來獲取當前的文件路徑。
const path = require("path")
module.export = {output:{path:path.resolve(__dirname,"dist"),filename:"bundle.js"}}

loader 加載器（中間件）

loader讓webpack有能力去處理費JavaScript文件，webpack本身只能理解JavaScript。豐富loader（官方的和第三方）可以將所有類型的文件都轉化為webpack可以理解的JavaScript，webpack發揮的作用是將JavaScript和轉化為JavaScript的資源按照相互依賴的關系打包。
并且這些loader之間可以靈活的組裝，開發者可以根據自己的需求靈活的定義loader的構成。loader的配置方法為
module.export = {

module:{
    rules:[
        {
            test:.js$,
            loader:"babel-loader"
        },
        {
            test:.css$,
            loader:"style-loader!css-loader"
        }
    ]
}

}
配置文件告訴webpack當遇到符合test對應正則表達式的文件時，先使用對應的loader轉化一下。

babel-loader的使用方法

安裝babel loader來處理es6的語法，安裝npm較多，包括babel-loaderbabel-core
babel-loader可以通過參數presets（預設）來指定es6的版本，可選的參數有："es2015","es2016","es2017","latest"。在使用preset的時候不僅需要通過config.js來指定使用何種preset，還需要安裝相關的preset的npm包。例如安裝preset為latest的的npm包，命令是：npm install babel-preset-latest --save-dev

plugin 插件

還有一部分工作是loader不能完成，例如壓縮、打包優化、重新定義環境中的變量等等?？梢哉fplugin的能力是loader的父集。使用plugin的方式是先引入插件模塊，通過require。然后在配置對象的plugin中創建插件的實例。
const htmlWebpackPlugin = require("html-webpack-plugin")
module.export = {

plugin:[
    new htmlWebpackPlugin({template:"./index.html"})
]

}

plugin接受一個數組作為其value，數組中是各個插件的構造函數，可以在這些構造函數傳入相關的參數來達到目的。例如通過使用html-webpack-plugin來實現自動引入打包的內容，不再使用手動的方式來實現。還可以加入[hash]來保證引入文件的命名的唯一性，從而可以保證上線時候引用的是最新的版本。

html-webpack-plugin的參數有：
{filename:"生成的文件名",
title:"文件中的title",
template:"以什么文件作為其模板",
chunks:["使用什么chunk"],
excludeChunks:["排除什么chunk"]
inject:["chunk的引用放在什么地方"]
}

webpack命令行的一些參數

1.指定特定文件的loader： --module-bind "css=style-loader!css-loader"

2.顯示打包進程： --progress

3.顯示所有打包模塊： --display-modules

4.顯示打包原因： --display-reasons

5.指定打包配置文件： --config

6.自定義命令行腳本：在package.json之中來定義

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

webpack 學習筆記（一）

摘要：引言最近在學習，發現好多知識點，之前一點都沒有接觸過，如等等。使用本地安裝，會存于文件夾內與屬性內，更方便項目文件遷移以及協同開發等情況。引言最近在學習webpack，發現好多知識點，之前一點都沒有接觸過，如babel、core-js、browserslist等等。以前習慣了使用cli構建項目，很多東西不用考慮，拿來就用，這樣的碼農是不會有能力提升的，必須了解更多的知識點，才能成為...

zhangwang 2019-08-26 10:36 評論0 收藏0
React學習筆記1：環境搭建

摘要：新搭建的個人博客，本文地址學習筆記環境搭建本文的書寫環境為，之后會補充下的差異創建學習目錄初始化項目根據相關提示完善信息，入口文件安裝相關包，并且使用也就是支持，需要包，因為我之前做個一些相關項目，所以部分包已經全局安裝，比如等等，大家新搭建的個人博客，本文地址：React學習筆記1：環境搭建本文的書寫環境為mac，之后會補充windows下的差異 1、創建學習目錄 mkdir l...

Sourcelink 2019-08-19 17:26 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 評論0 收藏0
webpack學習筆記

摘要：運行該語句會執行如下步驟使用進行文件壓縮。設置環境變量，觸發某些包，以不同的方式進行編譯。在原始的源碼中執行查找和替換操作。等同于表示任何出現的地方都會被替換為。提供函數用來合并配置對象當文件小于限制，會返回。選項 1.devtool：通過在瀏覽器調試工具(browser devtools)中添加元信息(meta info)增強調試。 2.resolve.alias:創建 impor...

Soarkey 2019-08-22 10:53 評論0 收藏0