當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

webpack — 概述介绍

發(fā)布時(shí)間：2023/12/13 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack — 概述介绍小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

webpack概述

webpack是一個(gè)流行的前端項(xiàng)目構(gòu)建工具（打包工具），可以解決當(dāng)前web 開發(fā)中所面臨的困境。

webpack提供了友好的模塊化支持，以及代碼壓縮混淆、處理js兼容問題、性能優(yōu)化等強(qiáng)大的功能，從而讓程序員把工作的重心放到具體的功能實(shí)現(xiàn)上，提高開發(fā)效率和項(xiàng)目的可維護(hù)性。

目前絕大多數(shù)企業(yè)中的前端項(xiàng)目，都是基于webpack進(jìn)行打包構(gòu)建的。

webpack的基本使用

一.創(chuàng)建列表隔行變色項(xiàng)目

新建項(xiàng)目空白目錄，并運(yùn)行 npm init -y 命令，初始化包管理配置文件 package.json

新建 src 源代碼目錄

新建 src -> index.html 首頁(yè)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script> </head> <body><input type="text" placeholder="測(cè)試"><ul><li>第1個(gè)li</li><li>第2個(gè)li</li><li>第3個(gè)li</li><li>第4個(gè)li</li><li>第5個(gè)li</li><li>第6個(gè)li</li><li>第7個(gè)li</li><li>第8個(gè)li</li><li>第9個(gè)li</li></ul><div id="box"></div><hr/><div id="app"></div> </body> </html>

初始化首頁(yè)基本的結(jié)構(gòu)

運(yùn)行 npm install jquery -s 命令，安裝 jQuery

通過模塊化的形式，實(shí)現(xiàn)列表的隔行變色效果

import $ from 'jquery'$(function () {$('li:odd').css('backgroundColor', 'blue')$('li:even').css('backgroundColor', 'lightblue') })

二，在項(xiàng)目中安裝和配置webpack

運(yùn)行 npm install webpack webpack-cli -D命令，安裝 webpack 相關(guān)的包

在項(xiàng)目根目錄中，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件

在 webpack 的配置文件中，初始化如下基本配置：

module.exports = {// 編譯模式mode:'development' , //mode 用來指定構(gòu)建模式//development 屬于不壓縮模式，建議在開發(fā)時(shí)使用//production 屬于壓縮模式，建議在發(fā)布的時(shí)候使用 }

在 package.json 配置文件中的 scripts 節(jié)點(diǎn)下，新增 dev 腳本如下：

"scripts": { "dev": "webpack" //script 節(jié)點(diǎn)下的腳本，可以通過 npm run 執(zhí)行}

在終端中運(yùn)行 npm run dev 命令，啟動(dòng) webpack 進(jìn)行項(xiàng)目打包。

三、配置打包的入口和出口

webpack 的 4.x 版本中默認(rèn)約定：

打包的入口文件為 src -> index.js
打包的出口文件為 dist -> main.js

如果要修改打包的出口與入口，可以在 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 的自動(dòng)打包功能

運(yùn)行 npm install webpack-dev-server -D 命令，安裝支持項(xiàng)目自動(dòng)打包的工具

修改 package.json —> scripts 中的 dev 命令如下：

"scripts": { "dev": "webpack-dev-server" //script 節(jié)點(diǎn)下的腳本，可以通過 npm run 執(zhí)行 },

將 src -> index.html 中，script 腳本的引用路徑，修改為 “/buldle.js”

運(yùn)行 npm run dev 命令，重新進(jìn)行打包

在瀏覽器中訪問 http://localhost:8080 地址，查看自動(dòng)打包效果

? 注意：

? webpack-dev-server 會(huì)啟動(dòng)一個(gè)實(shí)時(shí)打包的 http 服務(wù)器

五、配置 html-webpack-plugin 生成預(yù)覽頁(yè)面

運(yùn)行 npm install html-webpack-plugin -D 命令，安裝生成預(yù)覽頁(yè)面的插件

修改 webpack.config.js 文件頭部區(qū)域，添加如下配置信息：

// 導(dǎo)入生成瀏覽頁(yè)面的插件，得到一個(gè)構(gòu)造函數(shù) const HtmlWebpackPlugin = require('html-webpack-plugin') // 創(chuàng)建插件的實(shí)例對(duì)象 const htmlPlugin = new HtmlWebpackPlugin({template :'./src/index.html' , //指定要用到的模板文件filename:'index.html' //指定生成文件的名稱，該文件存在與內(nèi)存中，在目錄中不顯示 })

修改 webpack.config.js 文件中向外暴露的配置文件，新增如下配置節(jié)點(diǎn)：

module.exports = { plugins:[htmlPlugin] //plugins 數(shù)組是webpack 打包期間會(huì)用到的一些插件列表 }

六、配置自動(dòng)打包相關(guān)的參數(shù)

// --open 打包完成后自動(dòng)打開瀏覽器頁(yè)面 // --host 配置IP地址 // --port 配置端口 "scripts": {"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" }

webpack中的加載器

1、通過 loader 打包非 js 模塊**

在實(shí)際開發(fā)過程中，webpack 默認(rèn)只能打包處理以 .js 后綴名結(jié)尾的模塊，其他非 .js后綴名結(jié)尾的模塊，webpack 默認(rèn)處理不了，需要調(diào)用 loader 加載器才可以正常打包，否則會(huì)報(bào)錯(cuò)！

loader 加載器可以協(xié)助 webpack 打包處理特定的文件模塊，比如：

less-loader 可以打包處理 .less 相關(guān)的文件
sass-loader 可以打包處理 .scss 相關(guān)的文件
url-loader 可以打包處理 .css 中與 url 路徑相關(guān)的文件

2、loader 的調(diào)用過程**

webpack中加載器的基本使用

一、打包處理css 文件

運(yùn)行 npm i style-loader css-loader -D 命令，安裝處理 css 文件的 loader

在 webpack.config.js 的module -> rules 數(shù)組中，添加 loader 規(guī)則如下：

//所有第三方文件模塊的匹配規(guī)則module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},]}

其中， test 表示匹配的文件類型，use 表示對(duì)應(yīng)要調(diào)用的 loader

注意：

use 數(shù)組中指定的 loader 順序是固定的
多個(gè) loader 的調(diào)用順序是：從后往前調(diào)用

二、打包處理less文件

運(yùn)行 npm i less-loader less -D 命令.

在 webpack.config.js 的module -> rules 數(shù)組中，添加 loader 規(guī)則如下：

module:{rules:[.....{test:/\.less$/,use:['style-loader','css-loader','less-loader']},]}

三、打包處理scss文件

運(yùn)行 npm i sass-loader node-sass -D 命令.

在 webpack.config.js 的module -> rules 數(shù)組中，添加 loader 規(guī)則如下：

module:{rules:[......{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]}

四、配置 postCSS 自動(dòng)添加 css 的兼容前綴

運(yùn)行 npm i postcss-loader autoprefixer -D 命令.

在項(xiàng)目的根目錄中創(chuàng)建 postcss 的配置文件 postcss.config.js , 并初始化如下配置：

const autoprefixer = require('autoprefixer') //導(dǎo)入自動(dòng)添加前綴的插件 module.exports = {plugins:[autoprefixer] //掛載插件 }

在 webpack.config.js 的module -> rules 數(shù)組中，修改 css 的 loader 規(guī)則如下：

module:{rules:[{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}]}

五、打包樣式表中的圖片和字體文件

運(yùn)行 npm i url-loader file-loader -D 命令.

在 webpack.config.js 的module -> rules 數(shù)組中，添加 loader 規(guī)則如下：

module:{rules:[......{test:/\.jpg|png|gif|hmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=41698'},]}

其中？之后的是 loader 的參數(shù)項(xiàng)

limit 用來指定圖片的大小，單位是字節(jié)（byte），只有小于 limit 大小的圖片，才會(huì)被轉(zhuǎn)為 base64圖片

六、打包處理 js 文件中的高級(jí)語法

安裝 bable轉(zhuǎn)換器相關(guān)的包：npm i babel-loader @babel/core @babel/runtime -D

安裝 bable語法插件相關(guān)的包： npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在項(xiàng)目根目錄中，創(chuàng)建 babel 配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {presets:['@babel/preset-env'],plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties'] }

在 webpack.config.js 的module -> rules 數(shù)組中，添加 loader 規(guī)則如下：

module:{rules:[......{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},]}

Vue 單文件組件

一、Vue 單文件組件的基本用法（組成結(jié)構(gòu)）

? template 組件的模塊區(qū)域
? script 業(yè)務(wù)邏輯區(qū)域
? style 樣式區(qū)域

<template> <div><h1>這是 App 根組件</h1></div> </template><script> // 向外輸出的函數(shù)及事件 export default {data() {return {} }, //私有數(shù)據(jù)methods: {} //處理函數(shù)// ....其它業(yè)務(wù)邏輯}; </script><style scoped> /* scoped 是為了防止樣式的沖突問題 */ /* 定義當(dāng)前文件中的內(nèi)容樣式 */ h1{color: red; } </style>

二、webpack 中配置 vue 組件的加載器

運(yùn)行 npm i vue-loader vue-template-compiler -D 命令.

在 webpack.config.js 配置文件中，添加 vue-loader 的配置項(xiàng)如下：

// 后綴名為 vue 的文件組件加載器添加 const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {module:{rules:[//......其他規(guī)則{test:/\.vue$/,use:'vue-loader'}]},plugins:[//...... 其他插件new VueLoaderPlugin() //請(qǐng)確保引入這個(gè)插件] }

三、在webpack 項(xiàng)目中使用 vue

運(yùn)行 npm i vue -s 安裝 vue

在 src -> index.js 入口文件中，通過 import Vue from ‘vue’ 來導(dǎo)入 vue 構(gòu)造函數(shù)

創(chuàng)建 vue 的實(shí)例對(duì)象，并指定要控制的 el 區(qū)域

通過 render 函數(shù)渲染 App 根組件

//1.導(dǎo)入 Vue 構(gòu)造函數(shù) import Vue from 'vue' //2. 導(dǎo)入App 根組件 import App from './components/App.vue'const vm = new Vue({//3. 指定vm 實(shí)例要控制的頁(yè)面區(qū)域el: '#app',//4. 通過render 函數(shù)，把指定的組件渲染到 el 區(qū)域中render: h => h(App) }) //.$mount('#app')

四、webpack打包發(fā)布

上線之前需要通過 webpack 將應(yīng)用進(jìn)行整體打包，可以通過package.json 文件配置打包命令：

//在package.json文件中配置 webpack 打包命令 //該命令默認(rèn)加載項(xiàng)目根目錄中的 webpack.config.js 配置文件"scripts": { //用于開發(fā)調(diào)式的命令"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",//用于打包的命令"build":"webpack -p"},

注意：

? 最后在文件的端口下實(shí)行的命令為

npm run build

r: h => h(App)
}) //.$mount(’#app’)

### 四、webpack打包發(fā)布上線之前需要通過 webpack 將應(yīng)用進(jìn)行整體打包，可以通過package.json 文件配置打包命令：```js //在package.json文件中配置 webpack 打包命令 //該命令默認(rèn)加載項(xiàng)目根目錄中的 webpack.config.js 配置文件"scripts": { //用于開發(fā)調(diào)式的命令"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",//用于打包的命令"build":"webpack -p"},

注意：

? 最后在文件的端口下實(shí)行的命令為

npm run build

總結(jié)

以上是生活随笔為你收集整理的webpack — 概述介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

webpack

上一篇： Vue — 第七天（vue-cli-案例
下一篇： webpack — 概述（2）