webpack 作為當下前端前沿最受歡迎的打包工具，作為一個前端開發人員是很有必要去了解下它的。
題外話：
npm i -D 是 npm install --save-dev的簡寫，是安裝模塊並保存到package.json的devDependencies
安裝webpack
npm i -D webpack (穩定版)
npm i -D webpack@<version>(指定版本號)
使用webpack命令行
在packjson.json
"scripts": { "build": "webpack src/main.js dist/bundle.js", // 將指定文件打包到指定目錄的文件 }
然后就可以使用命令打包 npm run build
使用Loader
通常webpack的配置文件都會放在webpack.config.js文件中（這個是webpack會去默認讀取的）
基礎內容：
const path = require('path'); module.exports = { // JavaScript 執行入口文件 entry: './main.js', output: { // 將所有依賴的模塊合並輸出到一個bundle.js文件 filename: 'bundle.js', // 將輸出文件都放在dist目錄下 path: path.resolve(__dirname, './dist'), }, module: { rules: [ { // 用正在向嗯表達式去匹配要用該Loader轉換的CSS文件 test: /\.css$/, use: ['style-loader', 'css-loader?minimize'] } ] } };
需要安裝Loader npm i -D style-loader css-loader
解讀
- use屬性的值需要是一個由Loader名稱組成的數組，Loader的執行順興是由后到前的
- 每個Loader都可以通過URL querstring 的方式來傳入參數， 例如 css-loader?minimize中的minimize高祖css-loader要開啟css壓縮
使用Plugin
Plugin是用來擴展Webpack功能的，通過在構建流程里注入鈎子實現，它為Webpack帶來了很大的靈活性。
配置方面： plugins屬性是一個數組，里面的每一項都是插件的一個實例，在實例化一個組件時可以通過構造函數傳入這個組件支持的配置屬性。
使用DevServer
作用：
- 提供HTTP服務而不是使用本地文件預覽
- 監聽文件的變化並自動刷新網頁，做到實時預覽
- 支持Source Map, 以方便調試
安裝： npm i -D webpack-dev-server
啟動配置：
"build": "webpack-dev-server --hot --devtool source-map"
當你啟動的時候會看到這樣一串日志：
Project is running at http://localhost:8081/
webpack output is served from /
這意味着DevServer啟動的HTTP服務器在8081端口，DevServer啟動后會一直主流在后台保持運行，訪問這個網址，就能獲取項目根目錄下的index.html
這時候還不會形成打包文件。
實施預覽：
開啟： webpack --watch
這樣的話就會實施知道改動代碼就會進行更新客戶端的內容（這回刷新整個頁面）
模塊熱替換：
開啟： --hot
這樣的話，代碼更改只會實現局部刷新
支持Source Map
開啟 --devtool source-map
總結：
- Entry: 入口， webpack執行創建的第一步將從Entry開始，可抽象成輸入
- Module: 模塊， 在Webpack里一切皆模塊，一個模塊對應一個文件。Webpack會從配置的Entry開始遞歸找出所有的依賴的模塊
- Chunk: 代碼塊，一個Chunk由多個模塊組合而成，用於代碼合並與分割
- Loader: 模塊加載器，用於經模塊的原內容按照需求裝換成新內容
- Plugin: 擴展插件， 在Webpack構建流程中的特定時機注入擴展邏輯，來改變構建結果或做我們想要的事情
- Output: 輸出結果，在Webpack經過一系列處理並得出最終想要的代碼后輸出結果。