為什麼需要構建工具？ 轉換 ES6 語法 轉換 JSX CSS 首碼補全/預處理理器器 壓縮混淆 圖⽚片壓縮 前端構建演變之路 ant + YUI Tool grunt gulp、fis3 webpack、rollup、parcel 為什麽選擇 webpack? 社區⽣生態豐富 配置靈活和插件化擴展 ...
為什麼需要構建工具？
- 轉換 ES6 語法
- 轉換 JSX
- CSS 首碼補全/預處理理器器
- 壓縮混淆
- 圖⽚片壓縮
前端構建演變之路
- ant + YUI Tool
- grunt
- gulp、fis3
- webpack、rollup、parcel
為什麽選擇 webpack?
- 社區⽣生態豐富
- 配置靈活和插件化擴展
- 官⽅方更更新迭代速度快
初識webpack，簡單的例子入手
安裝
先確保你已經安裝了 Node
其中檢查node是否安裝成功，使用node -v；檢查npm的版本使用npm -v。
創建一個新的項目來開始我們的 webpack 之旅：
mkdir webpack-custom
cd webpack-custom
使用 npm init （或者使用npm init -y表示預設配置都選擇yes）來創建一個「package.json」文件用於管理項目版本和依賴，然後我們使用 npm安裝webpack:
npm install webpack webpack-cli -D
webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本之後不再作為 webpack 的依賴了，我們使用時需要單獨安裝這個工具。
檢查是否安裝成功：
mac系統：./node_modules/.bin/webpack -v
window系統：.\node_modules\.bin\webpack -v
安裝成功之後，我們可以在項目的「package.json」文件中看到對應的 webpack 版本依賴：
"devDependencies": { "webpack": "^4.43.0", "webpack-cli": "^3.3.11" }
構建
安裝完成之後，我們可以使用 npx webpack 命令來運行項目內安裝的 webpack。
其中，我們可以使用如下命令執行一些操作：
- npx webpack --help:查看 webpack-cli 提供了哪些命令可用
- npx webpack --version:查看我們安裝的版本
- npx webpack:運行構建
我們先添加兩個簡單的代碼文件，「src/index.js」和「src/hello.js」，如代碼：
index.js代碼：
import { hello, log } from './hello.js';
log(hello);
hello.js代碼：
export const hello = 'hello world'; export function log(message) { console.log(message); }
我們執行npx webpack會在src同級目錄生成一個dist/main.js文件，這就是使用webpack構建的結果，當然構建我們也可以使用如下命令執行：.\node_modules\.bin\webpack
，我們也可以npm script運行webpack,也即是把構建命令寫到 package.json 的 scripts 中：
"scripts": { "build": "webpack" },
然後我們就可以使用npm run build命令構建webpack了。
配置文件
接下來我們嘗試創建一個 webpack 的配置文件，在我們項目的根目錄下創建一個「webpack.config.js」的文件：
'use strict'; var path = require('path'); module.exports = { mode: 'development', // 指定構建模式 entry: './src/index.js', // 指定構建入口文件 output: { path: path.join(__dirname,'dist'), // 指定構建生成文件所在路徑 filename: 'bundle.js' // 指定構建生成的文件名 }, }
然後我們執行npm run build，就會生成「dist/bundle.js」文件，這說明配置文件生效了。
本地開發
在日常開發中，我們不可能每次修改一次代碼就執行一次構建，我們需要一個方便本地開發的工具，和 webpack 配套的則是 webpack-dev-server。同樣的，我們使用 npm 來安裝：
npm install webpack-dev-server -D
同樣地，我們在「package.json」文件的 scripts 欄位中添加一個啟動開發伺服器的命令，如：
"scripts": { "build": "webpack", "serve": "webpack-dev-server" }
這個時候我們還需要一個「index.html」文件作為頁面的基礎，webpack 暫時沒有能力來處理 html 文件（需要通過插件來處理），我們先在 dist 目錄下創建一個「index.html」文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>webpack-demo</title> </head> <body> <script type="text/javascript" src="bundle.js"></script> </body> </html>
同時，在配置文件中添加指定開發伺服器啟動路徑的配置：
devServer: { contentBase: path.resolve(__dirname, 'dist') // 開發伺服器啟動路徑 }
接著再執行 npm run serve，便可以成功啟動 webpack-dev-server 了，預設使用的埠是 8080，用瀏覽器打開 http://localhost:8080/，便可以訪問到我們剛纔創建的 html 文件了，打開控制台就可以看到前邊的 js 代碼列印出來的 hello world 了。
