Webpack學習筆記

時間 2019-11-15

標籤 webpack 學習筆記简体版

原文原文鏈接

input選項

自我總結: 如其名，一些入口處的引導文件javascript

Output選項

定義：output 位於對象最頂級鍵(key)，包括了一組選項，指示 webpack 如何去輸出、以及在哪裏輸出你的「bundle、asset 和其餘你所打包或使用 webpack 載入的任何內容」。
自我總結：這個也沒什麼說的，如其名，定義了最終生成文件的地址以及其餘選項css

path

此選項影響 compilation 對象的輸出。output 選項控制 webpack 如何向硬盤寫入編譯文件。
注意，即便能夠存在多個入口起點，但只指定一個輸出配置。
若是你用了哈希（[hash] 或 [chunkhash]），請確保模塊具備一致的順序。可使用 OccurrenceOrderPlugin 或 recordsPath。

filename

指定硬盤每一個輸出文件的名稱。

sourceMapFilename

JavaScript 文件的 SourceMap 的文件名。
它們在 output.path 目錄中。

chunkFilename

非入口的 chunk(non-entry chunk) 的文件名，路徑相對於 output.path 目錄。

library:

若是設置此選項，會將 bundle 導出爲 library。
output.library 是 library 的名稱。

libraryTarget

library 的導出格式

publicPath

這個選項困擾了我很久，直到我看了這個視頻跟着走才明白其意思，他的意思就是若是你把好比img和其餘的東西都生成在build文件夾中，若是你不指明這個選項，那麼html中引用的地址也不會加上build，而是把當前的html的目錄做爲了根目錄去找。聲明瞭這個選項後，也就是指明瞭資源文件的根目錄

Module選項

自我總結: 這個選項是對你的代碼作預受理(preprocessors),就是在生成bundle.js以前對代碼作處理，好比：babel-loader: ES6或7轉ES5之類的活都由loader們去作。這個選項之因此存在是由於webpack不知道如何去處理他不認識的好比image、ts等等的文件，可是loader知道如何去處理，因此這部分工做就交給loader了。
PS: 一、因爲從webpack從1升級到2,咱們也須要注意loaders已經由於兼容性的問題被升級成了rules。另外就是執行順序的說法也困擾了我很久，不過最後從項目中慢慢試出來了。因爲rules是個對象，根本就不存在什麼順序問題，可是在use數組中，這個就存在順序問題了，並且順序蠻奇怪的，是從下到上(from bottom to top),從右向左（from right to left）,跟咱們平時的認知是不同的
二、還有一個管道的概念：用！連接的loader能夠這樣寫 -> css-loader!sass-loader意思就是先經過sass-loader去加載，而後出來的結果再去css-loader去加載，執行的順序也是從右到左html

　angular2-template-loader

　* 主要適用於angular2,一種webpack的鏈式加載器，內聯組件的html和CSS到組件中java

必要條件：用這個loader時必須去掛載一個能夠處理.html和.css的loader,官方推薦：raw-loader
主要做用: 把style和html改爲加載式require()寫法，nodejs裏面也是這樣去加載模塊的，這個實際上就是官網文檔所說的相對於組件路徑的問題，這裏不講述太多，你能夠看官方文檔

　raw-loader

　* 這個loader實際上是這樣的，它其實很好的印證了webpack不會幹一些他不知道的東西，讓loader們來作node

好比txt文件, 你寫個import txt from 'file.txt', webpack就傻眼了，但你引入了這個插件，
這樣寫...test: /\.txt$/,use: 'raw-loader'...，webpack就有能力處理了

json-loader

　* 裝載json文件的loaderjquery

css-loader

裝載CSS的loader
親自體驗過這個loader以後也是大呼牛逼啊，這個最強大的地方是結合 style-loader 代碼能夠這樣寫
test: /\.css$/, loader: 'style-loader!css-loader'
這句代碼幹嗎的呢？它其實作了倆件事，第一把component裏引入的css拿過來，而後放到打包後的component裏，
在component生成時能夠動態的將css以<style><style>標籤的形式插入到head中，這樣就作到了組件化！

　to-string-loader

　* 返回內容格式爲string的文件webpack

sass-loader

編譯SCSS到CSS

file-loader

裝載jpg、png、gif圖片或字體文件的loader

tslint-loader

裝載typescript的loader
options: {
configFile: '配置文件地址'
}

Plugins選項

自我總結：大多數狀況他們都是後處理器(post processes)，意味着bundle.js已經生成，而後對文件作一些混淆和壓縮啊等等的工做。實際上這個選項是很是強大的，一般loader作不了的，都交給Plugins去作，而且它的權限至關的高，他有能力進入整個webpack的編譯生命週期。web

assets-webpack-plugin

一個能夠提供打包後的文件路徑並生成json的插件
prettyPrint: 是否格式化JSON輸出的可讀性

CheckerPlugin

awesome-typescript-loader提供的一個插件
啓用此插件能夠開一個進程去進行類型檢查（typescript的緣故）, 由於是多線程，webpack不會等待它

CommonsChunkPlugin

是一個可選的用於創建一個獨立文件(又稱做 chunk)的功能，這個文件包括多個入口 chunk 的公共模塊
這個插件起初我也很困惑。。跟着上面的視頻走完後才明白，假如說你有倆個文件都引用了jquery, 若是不用這個插件，就算你的入口是這樣寫的
entry: { bundle: './src/index.js', vendor: ['jquery'] }
出口是這樣寫的：
output: { path: __dirname + '/build', filename: '[name].[chunkhash].js' }
，那麼最終生成的文件不管是bundle.js 仍是 vendor.js 都包含了jQuery.js，這個緣由是由於webpack不會把倆者的公共模塊的jQuery提取出來，他不會是由於他作不到，因此就須要強大的plugin提供幫助了！
有了這個插件，那麼最終生成的vendor裏面只有jquery，bundle.js只有你寫的其餘代碼而不包含jQuery

CopyWebpackPlugin

這是一個webpack插件，將單個文件或整個目錄複製到構建目錄。
這個插件比較容易理解，就是你設置個from 和 to 後就把當前的目錄裏面的內容複製到打包後的目錄了
我嘗試了不寫to，發現打包後的目錄不包含文件夾，只包含內容

HtmlWebpackPlugin

很是有用的插件，自動將生成一個html文件，自動插入JS和CSS，這在文件名有hash時特別有用
chunksSortMode: 容許控制chunks被打包塞進html的順序.容許的值：none|auto|dependency 默認：auto
inject：打包塞進html的位置：head裏面仍是body底部 true | head | body | false

LoaderOptionsPlugin

它的用途是幫助人們從 webpack 1 遷移至 webpack 2

DefinePlugin

容許你建立一個在編譯時能夠配置的全局常量
字符串都用JSON.stringify包裝一下

DllBundlesPlugin

一個用於將軟件包組捆綁爲DLL的Webpack插件

AddAssetHtmlPlugin

將HTML或CSS資源添加到html-webpack-plugin生成的HTML中

OptimizeJsPlugin

經過一些特殊的函數包裝方法優化JS文件而完成更快的首次加載

ExtractTextPlugin

它會將全部的入口chunk (entry chunks) 中的 require("style.css") 移動到分開的 css 文件。
所以，你的樣式再也不內聯到 javascript 裏面，但會放到一個單獨的 css 包文件 (styles.css)當中。
若是你的樣式文件大小較大，這會更快，由於樣式文件會跟 javascript 包並行加載。

cache選項

定義：緩存生成的 webpack 模塊和 chunk，來改善構建速度。緩存默認在觀察模式(watch mode)啓用。禁用緩存只需簡單傳入：cache: falsetypescript

devserver

定義：這個是個在發開模式下特別有用的小型服務器，以nodejs中的express搭建的，因此你能夠配置他們express

port：指定要監聽請求的端口號
host: 指定使用一個 host。默認是 localhost
historyApiFallback：當使用HTML5 History API，任意的 404 響應能夠提供爲 index.html 頁面
watchOptions 與監視文件相關的控制選項
* aggregateTimeout：當第一個文件更改，會在從新構建前增長延遲。這個選項容許 webpack 將這段時間內進行的任何其餘更改都聚合到一次從新構建裏。以毫秒爲單位
* poll: 經過傳遞 true 開啓 polling，或者指定毫秒爲單位進行輪詢。