webpack學習之路
2018年8月20日16:57:18
概述:本文記錄自己學習webpack的過程,以及在實際開發任務中遇到的一些問題
1 相關
1.1 常見英文縮寫
name | meaning |
---|---|
dist | 目錄名,distribution 釋出版,經過打包、壓縮、混淆後的程式碼 |
build | 目錄名,存放與編譯打包相關的配置檔案 |
env | enviroment,環境 |
prod | production,生產環境 |
dev | devolopment,開發環境 |
conf | configuration,配置 |
ext | extensions,擴充套件 |
alias | 別名 |
DevTool | 開發工具 |
1.2 安裝包的資訊
name | version | npm | github | official website |
---|---|---|---|---|
webpack | 4.16.5 | click | click | click |
webpack-dev-server | 3.1.5 | click | click | |
UglifyJS 3 | 3.4.7 | click | click | 中文文件 |
1.3 官方文件
2 webpack
2.1 基本配置
module.exports = {
entry: './src/app',
output:{
filename:'./dist/app.js'
}
}
2.2 常用命令介紹
這裡只羅列常用的基本命令,關於不常用的特殊命令,可參考官網
- $ webpack
在當前目錄中找webpack的配置檔案webpack.config.js或webpackfile.js,並且執行這個配置檔案的內容。
等價於 $ webpack webpack.config.js
配置檔案的命名規範,一般帶上環境,如webpack.base|dev|prod.conf.js。分別表示基本環境、開發環境和生產環境。
- $ webpack --config ./build/webpack.dev.conf.js
–config 表示指定配置檔案路徑為./build/webpack.dev.conf.js
在當前目錄中查詢指定路徑的檔案./build/webpack.dev.conf.js,並且執行這個配置檔案的內容。
-
$ webpack --help
-
$ webpack -h
檢視幫助資訊
-
$ webpack --version
-
$ webpack -v
檢視版本號
- $ webpack -p
壓縮混淆指令碼
- $ webpack -d
生成map對映檔案,在最終的打包檔案中,這樣會導致bundle包非常大,生產環境禁止這樣操作,建議使用{devtool: “source-map”}
2.3 sourcemap
webpack生成的打包檔案,在瀏覽器中不便除錯,因此需要加入sourcemap,方便斷點除錯
devtool 此選項控制是否生成,以及如何生成 source map。
module.exports = {
//devtool: "source-map",.map檔案和專案包分開,控制檯中原始檔和專案包在一個目錄。原始檔和對映檔案分開,對映資訊全 ,不會造成打包檔案過大。
//devtool: "eval-source-map",.map檔案融入專案包,控制檯中原始檔和專案包在不同目錄。
}
3 webpack外掛
3.1 webpack-dev-server
Use webpack with a development server that provides live reloading. This should be used for development only.
It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.
常用命令介紹
- $ webpack-dev-server --config ./build/webpack.dev.conf.js",
在當前目錄中查詢指定路徑的檔案./build/webpack.dev.conf.js,並且執行這個配置檔案的內容。
3.2 HtmlWebpackPlugin
對打包的檔名生成hash值,每次原始檔修改,打包後的名字就不一樣
js注入,打包後的js檔案會自動注入到html檔案的body結尾部分(預設,也可以注入到head部分)
css檔案注入,假如你使用ExtractTextPlugin外掛(這個外掛也是必須要了解的)將css檔案是單獨剝離出來,不放在html中的style標籤內,它會自動將css連結注入到link標籤中
3.3 Uglifyjs
uglifyjs 用來壓縮混淆JS程式碼;程式碼釋出生產環境版本(正式版本)時,必須走壓縮混淆流程;一般uglifyjs整合在webpack中,但自己可以嘗試一下對一個js檔案的壓縮混淆處理;
壓縮混淆後的程式碼,可以參考jquery.min.js,特徵如下:第一,程式碼沒有空格;第二,程式碼多了很多a、b、c等變數;分別稱作壓縮和混淆;
- uglifyjs只能壓縮js檔案(且只支援ECMAScript 5: ES5).
npm install uglify-js -g;//全域性安裝uglify-js包
npm uglify-js -v;//檢視是否安裝成功
uglifyjs test.js -o test.min.js;
uglifyjs test.js --output test.min.js;
//--前面是壓縮配置,後面是輸入的檔案;沒有指定output,則在終端輸出結果
uglifyjs --compress --mangle -- test.js;
uglifyjs --compress --mangle -- test.js --output test.min.js;
uglifyjs -c -m -- test.js -o test.min.js;
uglifyjs Command Line(cli)引數一覽表
--source-map 指定輸出的檔案產生一份sourcemap
--source-map-root 此路徑中的原始碼編譯後會產生sourcemap
--source-map-url 放在//#sourceMappingURL的sourcemap路徑. 預設是
--source-map傳入的值.
--source-map-include-sources 如果你要在sourcemap中加上原始檔的內容作為sourcesContent屬性,
就傳這個引數吧。
--source-map-inline 把sourcemap以base64格式附在輸出檔案結尾
--in-source-map 輸入sourcemap。假如的你要編譯的JS是另外的原始碼編譯出來的。
假如該sourcemap包含在js內,請指定"inline"。
--screw-ie8 是否要支援IE6/7/8。UglifyJS預設不相容IE。
--support-ie8 是否要支援IE6/7/8,等同於在`compress`, `mangle` 和
`output`選項中都設定`screw_ie8: false`
--expr 編譯一個表示式,而不是編譯一段程式碼(編譯JSON時用)
-p, --prefix 忽略sourcemap中原始碼的字首。例如`-p 3`會幹掉檔名前面3層目錄
以及保證路徑是相對路徑。你也可以指定`-p relative`,讓UglifyJS
自己計算輸出檔案、sourcemap與原始碼之間的相對路徑。
-o, --output 輸出檔案,預設標準輸出(STDOUT)
-b, --beautify 美化輸出/指定輸出 選項
-m, --mangle Mangle的名字,或傳入一個mangler選項.
-r, --reserved mangle的例外,不包含在mangling的名字
-c, --compress 是否啟用壓縮功能(true/fasle),或者傳一個壓縮選項物件, 例如
`-c 'if_return=false,pure_funcs=["Math.pow","console.log"]'`,
`-c`不帶引數的話就是用預設的壓縮設定。
-d, --define 全域性定義
-e, --enclose 所有程式碼嵌入到一個大方法中,傳入引數為配置項
--comments 保留版權註釋。預設保留Google Closure那樣的,保留JSDoc-style、
包含"@license" 或"@preserve"字樣的註釋。你也可以傳下面的引數:
- "all" 保留所有註釋
- 正則(如`/foo/`、`/^!/`)保留匹配到的。要注意,如果啟用了壓
縮,因為會移除不可達程式碼以及壓縮連續宣告,因此不是*所有*註釋都能
保留下來。
--preamble 在輸出檔案開頭插入的前言。你可以插入一段註釋,例如版權資訊。
這些不會被編譯,但sourcemap會改成當前的樣子。
--stats 在STDERR中顯示操作執行時間。
--acorn 用 Acorn解析。
--spidermonkey 假如輸入檔案是 SpiderMonkey AST 格式(像JSON).
--self 把UglifyJS2本身也構建成一個依賴包
(等同於`--wrap=UglifyJS --export-all`)
--wrap 所有程式碼嵌入到一個大函式中,讓"exports"和"global"變數有效,
你需要傳入一個引數指定模組被瀏覽器引入時的名字。
--export-all 只當`--wrap`時有效,告訴UglifyJS自動把程式碼暴露到全域性。
--lint 顯示一些可視警告
-v, --verbose Verbose
-V, --version 列印版本號.
--noerr 不要為-c,-b 或 -m選項中出現未知選項而丟擲錯誤。
--bare-returns 允許返回函式的外部。當最小化CommonJs模組和Userscripts時,
可能匿名函式會被.user.js引擎呼叫立即執行(IIFE)
--keep-fnames 不要混淆、幹掉的函式的名字。當代碼依賴Function.prototype.name時有用。
--reserved-file 要保留的檔案的名字
--reserve-domprops 保留(絕大部分?)DOM的屬性,當--mangle-props
--mangle-props 混淆屬性,預設是`0`.設定為`true`或`1`則會混淆所有屬性名。
設為`unquoted`或 `2`則只混淆不在引號內的屬性。`2`時也會讓
`keep_quoted_props` 美化選項生效,保留括號內的屬性;讓壓縮選項
的`properties`失效,阻止覆寫帶點號(.)的屬性。你可以通過在命令
中明確設定來覆寫它們。
--mangle-regex 混淆正則,只混淆匹配到的屬性名。
--name-cache 用來儲存混淆map的檔案
--pure-funcs 假如返回值沒被呼叫則可以安全移除的函式。
例如`--pure-funcs Math.floor console.info`(需要設定 `--compress`)
參考源
一個男人關於webpack的系列文章
其他