webpack學習筆記1

時間 2019-11-08

標籤 webpack 學習筆記简体版

原文原文鏈接

webpack做用

webpack能夠將前端工程中全部的靜態資源打包成爲一個或者多個js，靜態資源包括css、圖片等。css

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

模塊化編程

模塊的概念是將程序拆解爲離散的功能塊，一般稱這些功能塊爲模塊。模塊相對於程序而言，具備更小的體積，單個模塊具備清晰的目的，方便進行開發、測試、維護等工做。模塊的功能通過了抽象，提升了代碼的複用能力。前端

模塊的打開姿式

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

webpack核心概念

entry 入口文件

webpack是經過遞歸的方式來找出全部依賴之間的關係，並構建依賴圖。須要在配置文件中指定使用哪一個模塊做爲依賴圖的起始，進入起始依賴後就能夠根據起始模塊中指定的依賴來將其餘依賴將入進來。多個入口匹配單一輸出：entry:'./src/script/main.js'，在main.js之中可使用require或者其餘方法例如import來導入其餘的文件。
module.export = {entry:'./index.js'}webpack

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

output 輸出文件

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

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-devnpm

plugin 插件

還有一部分工做是loader不能完成，例如壓縮、打包優化、從新定義環境中的變量等等。能夠說plugin的能力是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的引用放在什麼地方']
}