2018年8月20日16:57:18

概述：本文記錄自己學習webpack的過程，以及在實際開發任務中遇到的一些問題

1 相關

1.1 常見英文縮寫

1.2 安裝包的資訊

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的系列文章

其他