為什么需要構建工具？
- 轉換 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 了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/85325.html
標籤：JavaScript
上一篇：10個Vue開發的技巧