JavaScript webpack5配置及使用基本介紹
一、webpack
1.1 簡介
在最原始的前端開發中,我們引入js和css等文件都是通過手動地在html中插入script和link標簽來達到引用的目的,不僅繁瑣,每個文件都需要單獨發一次請求,而且容易發生變量沖突的問題。
於是提出瞭JavaScript模塊化的概念,依次出現瞭AMD、CommonJS、CMD、ES6模塊化等解決方案。
但是事實上,我們工程使用模塊化開發是不能直接運行在瀏覽器上的,例如許多npm模塊都是使用的CommonJS的語法,瀏覽器並不支持。
此時便到瞭模塊打包工具出場的時候瞭,它的任務就是解決模塊間的依賴,並將項目打包成瀏覽器能夠識別的JS文件。
目前社區流行的打包工具有Webpack、Parcel、Rollup等。
如果你使用過vue-cli或者create-ract-app等腳手架,那麼其實你已經用過webpack瞭,因為他們都是基於webpack的二次封裝,所以,掌握瞭webpack的原理,能夠更好地去開發vue和react工程項目。
1.2 五大核心概念
項目中webpack的配置文件是位於根目錄的:webpack.config.js
entry (入口)
入口起點(entry point)指示 webpack 應該使用哪個模塊,來作為構建其內部依賴圖的開始,例如vue項目中的main.js就是打包時的入口文件。
module.exports = { entry: './src/main.js' };
項目中的所有依賴都應該直接或者間接地與入口文件關聯起來,例如我們都是在main.js中引入外部模塊(axios、router、elementUI等)。
output (出口)
output
屬性告訴 webpack 在哪裡輸出它所創建的 bundles
,以及如何命名這些文件,默認值為 ./dist。
const path = require('path'); module.exports = { entry: './src/main.js', output: { //__dirname是當前目錄根目錄 path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } };
- ouput的path屬性決定瞭打包好的文件的生成位置,默認是./dist,如果沒有,webpack會自動創建這個目錄。
- ouput的filename屬性決定瞭打包文件的名稱。
loader
loader 讓 webpack 能夠去處理那些非 JavaScript 文件(例如圖片,css文件、vue文件等,webpack 自身隻理解 JavaScript)。
loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊,然後你就可以利用 webpack 的打包能力,對它們進行處理。
module.exports = { //... module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] } ] } };
在 webpack 配置中定義 loader 時,要定義在 module.rules 中,其中test屬性是需要匹配的文件名的正則,use屬性是對應的loader,可以是多個(數組)。
例如上面的style-loader和css-loader就是處理js中引入的css文件(如果直接在js中引入css文件,是會報錯的)。
plugin (插件)
oader 被用於轉換某些類型的模塊,而插件則可以用於執行范圍更廣的任務。
插件的范圍包括,從打包優化和壓縮,一直到重新定義環境中的變量,插件增強瞭webpack的功能。
要使用插件,對於webpack內置的插件,我們通過引入webpack然後直接訪問內置插件即可,對於外部插件,我們需要先安裝,然後require引入,然後在plugin數組引入插件(new)實例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 用於訪問內置插件 const config = { module: { rules: [ //... ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config;
上面的html-webpack-plugin插件就是根據模板(template
)頁面在打包的目錄中自動生成一個對應的html文件,並且自動插入打包生成js文件的script標簽(正常webpack打包並不會生成html文件)。
mode (模式)
- 開發模式(development):優化打包速度,優化代碼調試。
- 生產模式(production):優化打包速度,優化代碼運行的性能
module.exports = { mode: 'production' };
即打包的模式不同,那麼webpack對於打包代碼的優化策略也不一樣。
二、配置及使用
我們來搭建一個非常簡單的webpack項目🌈。
項目結構
接著我們創建基本的項目結構和文件☁️。
my-webpack-demo
├── src
| └── index.js(入口文件)
├── utils
| └── time.js(時間工具)
├── package-lock.json
├── package.json
├── webpack.config.js(webpack配置)
其中utils下的time.js負責生成當前時間 time.js:
var time = new Date(); var m = time.getMonth() + 1; var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds(); module.exports = { now: t, };
入口文件index.js:
import { now } from "../utils/time.js"; document.write("現在是: " + now);
webpack配置文件webpack.config.js:
module.exports = { entry: "./src/index.js", mode: "development", output: { filename: "index.js", }, };
我們在終端執行打包命令:
此時webpack自動在項目中創建瞭dist目錄,並生成瞭打包好的index.js文件,那麼我們如何驗證index.js文件是否有效呢?
使用html-webpack-plugin
由於webpack並不會自動生成html文件,還記得上面的html-webpack-plugin
插件嗎?
通過npm安裝:
在配置文件中引入:
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通過 npm 安裝 module.exports = { entry: "./src/index.js", mode: "development", output: { filename: "index.js", }, plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", scriptLoading: "blocking" })], };
記得在src下創建index.html模板:
歐克!我們再次執行打包命令npx webpack
🌞。
可以看到,在dist目錄下不僅生成瞭index.js,還有index.html,我們在瀏覽器中打開它🌤️。
time.js
成功生效咯 ⛄!
三、寫在最後
我們完成瞭一個非常簡單的webpack項目,你是否發現瞭這和vue項目的打包流程十分相似呢?
隻是vue-cli的功能是十分強大的,例如可以解析vue文件,熱更新等等……
所以這也驗證瞭開始說的,vue-cli是對webpack的二次封裝,封裝瞭許多loader和plugin,並且配置好瞭入口,出口等配置信息,我們可以拿來就用。
到此這篇關於JavaScript webpack5配置及使用基本介紹的文章就介紹到這瞭,更多相關JS webpack5內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- webpack搭建vue環境時報錯異常解決
- 使用webpack打包ts代碼的實現
- webpack搭建腳手架打包TypeScript代碼
- 使用Webpack構建多頁面程序的實現步驟
- webpack-dev-server的安裝使用教程