Webpack 快速介紹及入門示例 · Node.js極簡教程

Webpack是一款前端模塊化管理和打包工具。它會根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、SASS、LESS 等。當前主流前端三大框架Vue、React、Angular2.x的主要腳手架Vue CLI(目前已經發布到3.x版本@vue/cli)、create-react-app、Angular CLI(@angular/cli)都是使用webpack工具進行打包的。本篇從簡處入手，將一個簡單的前端功能使用 webpack進行打包，以此來演示webpack的使用，本篇的示例需要先安裝Node.js 的環境。 ## 最簡單的webpack 打包場景（不使用服務器）最最簡單的打包壓縮的場景就是刪除js 文件中的注釋，這里的示例涉及三個文件： 1. index.html, 在index.html 導入打包后的 js 文件（bundle.js）。 2. hello.js, 在該文件中定義一個模塊，模塊功能只是添加一個div 3. index.js， index.js 中引入hello.js定義的模塊。具體的步驟如下： 1. 創建項目目錄 webpackprj 2. 產生 package.json文件 `npm init -y` 命令行切換到項目目錄執行如上命令，執行的效果如下： ![](https://img.kancloud.cn/00/c3/00c3bf0d3ad286f3ed2bbcf992e28322_834x310.png) 3. 安裝webpack `npm install webpack webpack-cli --global` 4. 創建項目文件 - 創建dist子目錄，添加 index.html文件，內容如下： ``` <html> <head> <meta charset="UTF-8" /> <title>My Webpack Project</title> </head> <body> <div id="div1"></div> <script src="bundle.js"></script> </body> </html> ``` - 創建src子目錄，添加index.js文件，內容如下： ``` const hello = require('./hello.js') document.querySelector('#div1').appendChild(hello()) ``` - 在src 田間hello.js文件，內容如下： ``` /** * 定義新的模塊 * 該注釋用于測試webpack 的壓縮打包 */ module.exports = function() { let hello = document.createElement('div') hello.innerHTML = 'Hello World' return hello } ``` 5. 配置打包配置文件： webpack.config.js ``` const path = require('path') // 處理絕對路徑 module.exports = { entry: path.join(__dirname, '/src/index.js'), // 入口文件 output: { path: path.join(__dirname, '/dist'), //打包后的文件存放的地方 filename: 'bundle.js' //打包后輸出文件的文件名 } } ``` 該文件用于配置入口、輸出等。也可不配置該文件，直接在命令行使用： `webpack src/index.js --output dist/bundle.js` 6. 運行打包命令 `webpack` ![](https://img.kancloud.cn/8f/97/8f97bc4942aee541ea155cc7624f80ef_808x237.png) 7. 看一下壓縮打包的bundle.js 的內容： ![](https://img.kancloud.cn/07/00/070080b98192c5d875496f7f9747e18c_1067x91.png) 從上可以看到，壓縮后的文件沒有注釋、沒有換行，看上去是一個立即執行的函數。 8. 使用瀏覽器打開index.html , 打開后的內容如下： ![](https://img.kancloud.cn/de/2c/de2c51722cdece9e45a0012dbf268360_793x126.png) 至此，完成了webpack的打包和壓縮的初體驗。 ## 使用服務器的方式運行上面是在本地運行，沒有使用到Node.js 的服務器。和 vue, react 的實際狀況有點差距。接下來就演示webpack如何結合服務器的方式。 webpack 提供了一個可選的本地開發服務器，這個本地服務器基于 node.js 構建，它是一個單獨的組件，在 webpack 中進行配置之前需要單獨安裝它作為項目依賴，安裝命令是： `npm i webpack-dev-server -D` webpack.config.js 配置修改如下： ``` const path = require('path') // 處理絕對路徑 module.exports = { mode: 'development', entry: path.join(__dirname, '/src/index.js'), // 入口文件 output: { path: path.join(__dirname, '/dist'), //打包后的文件存放的地方 filename: 'bundle.js' //打包后輸出文件的文件名 }, devServer: { //contentBase: './dist', // webpack 4.x 版本使用這個 //static:'./dist', static: { //服務器所加載文件的目錄 directory: path.join(__dirname, 'dist'), }, port: '8088', // 設置端口號為8088 } } ``` package.json 修改如下 ``` { "name": "mywebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack", "dev": "webpack-dev-server --open" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.73.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.2" } } ``` 在項目目錄下執行 `npm install` 安裝需要的模塊。完成之后在命令行輸入 `npm run dev` 啟動服務，啟動之后，會自動打開瀏覽器顯示效果。控制臺的顯示如下圖： ![](https://img.kancloud.cn/5e/5b/5e5b842f9fdecb280527cacf62b8c373_1019x549.png) ***** *****