webpack丨鼓搗鼓搗webpack4.x(01基礎版)
一、概念
webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時,它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle
WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言(Scss,TypeScript等),並將其打包為合適的格式以供瀏覽器使用。
構建就是把原始碼轉換成釋出到線上的可執行 JavaScrip、CSS、HTML 程式碼,包括如下內容。
- 程式碼轉換:TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。
- 檔案優化:壓縮 JavaScript、CSS、HTML 程式碼,壓縮合並圖片等。
- 程式碼分割:提取多個頁面的公共程式碼、提取首屏不需要執行部分的程式碼讓其非同步載入。
- 模組合併:在採用模組化的專案裡會有很多個模組和檔案,需要構建功能把模組分類合併成一個檔案。
- 自動重新整理:監聽本地原始碼的變化,自動重新構建、重新整理瀏覽器。
- 程式碼校驗:在程式碼被提交到倉庫前需要校驗程式碼是否符合規範,以及單元測試是否通過。
- 自動釋出:更新完程式碼後,自動構建出線上釋出程式碼並傳輸給釋出系統。
構建其實是工程化、自動化思想在前端開發中的體現,把一系列流程用程式碼去實現,讓程式碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力,解放了我們的生產力。
二、初始化專案
1、建立package.json
檔案
npm init
2、安裝webpack
和webpack-cli
// 全域性
cnpm i webpack -g
// 本地
cnpm i webpack webpack-cli -D
-D
是指開發環境需要,上線環境不需要。 等同於:--save-dev
-S
是上線需要。等同於:--save
3、配置package
中的scripts
"scripts": { "start": "webpack --profile --progress --colors --display-error-details", "dev": "webpack --display-modules --profile --progress --colors --display-error-details" },
color
: 輸出結果帶彩色,比如:會用紅色顯示耗時較長的步驟;
profile
: 輸出效能資料,可以看到每一步的耗時;
progress
: 輸出當前編譯的進度,以百分比的形式呈現;
display-modules
: 預設情況下node_modules
下的模組會被隱藏,加上這個引數可以顯示這些被隱藏的模組;
display-error-details
: 輸出詳細的錯誤資訊;
三、配置webpack
1、核心概念
entry:入口
output:輸出
loader:模組轉換器
plugins:擴充套件外掛
Module:模組
Chunk:程式碼塊
具體概念,後補,繼續...
2、建立目錄
建立 index.html檔案
建立src資料夾 / index.js檔案
建立webpack.config.js檔案
目錄結構,如下:
-rw-r--r-- 1 Administrator 197121 276 11月 15 10:59 index.html
drwxr-xr-x 1 Administrator 197121 0 11月 15 10:38 node_modules/
-rw-r--r-- 1 Administrator 197121 720 11月 15 10:41 package.json
-rw-r--r-- 1 Administrator 197121 3214 11月 15 10:58 README.md
drwxr-xr-x 1 Administrator 197121 0 11月 15 10:58 src/
-rw-r--r-- 1 Administrator 197121 0 11月 15 11:00 webpack.config.js
3、配置生成HTML的外掛
cnpm i html-webpack-plugin –D
4、配置webpack.config.js
檔案
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js'
},
module: {},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' })
],
mode: 'development',
resolve: {}
}
5、試執行
此時,執行
npm start
或webpack filename
, 就會一個dist
資料夾,包括一個html
檔案和build.js
檔案。放到本地伺服器上,試試,正常使用!
到此,一個簡版的webpack配置,已經OK了。先提一版。繼續...
參考
https://www.webpackjs.com/concepts/
https://www.webpackjs.com/configuration/
https://blog.csdn.net/sinat_17775997/article/details/80318569
Github
https://github.com/wangjianuo/webpack-tea
tag_v1.0_基礎版webpack配置