當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack — 概述介绍

發布時間：2023/12/13 编程问答 33 豆豆

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

webpack概述

webpack是一個流行的前端項目構建工具（打包工具），可以解決當前web 開發中所面臨的困境。

webpack提供了友好的模塊化支持，以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能，從而讓程序員把工作的重心放到具體的功能實現上，提高開發效率和項目的可維護性。

目前絕大多數企業中的前端項目，都是基于webpack進行打包構建的。

webpack的基本使用

一.創建列表隔行變色項目

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

新建 src 源代碼目錄

新建 src -> index.html 首頁

<!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="測試"><ul><li>第1個li</li><li>第2個li</li><li>第3個li</li><li>第4個li</li><li>第5個li</li><li>第6個li</li><li>第7個li</li><li>第8個li</li><li>第9個li</li></ul><div id="box"></div><hr/><div id="app"></div> </body> </html>

初始化首頁基本的結構

運行 npm install jquery -s 命令，安裝 jQuery

通過模塊化的形式，實現列表的隔行變色效果

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

二，在項目中安裝和配置webpack

運行 npm install webpack webpack-cli -D命令，安裝 webpack 相關的包

在項目根目錄中，創建名為 webpack.config.js 的 webpack 配置文件

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

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

在 package.json 配置文件中的 scripts 節點下，新增 dev 腳本如下：

"scripts": { "dev": "webpack" //script 節點下的腳本，可以通過 npm run 執行}

在終端中運行 npm run dev 命令，啟動 webpack 進行項目打包。

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

webpack 的 4.x 版本中默認約定：

打包的入口文件為 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 的自動打包功能

運行 npm install webpack-dev-server -D 命令，安裝支持項目自動打包的工具

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

"scripts": { "dev": "webpack-dev-server" //script 節點下的腳本，可以通過 npm run 執行 },

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

運行 npm run dev 命令，重新進行打包

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

? 注意：

? webpack-dev-server 會啟動一個實時打包的 http 服務器

五、配置 html-webpack-plugin 生成預覽頁面

運行 npm install html-webpack-plugin -D 命令，安裝生成預覽頁面的插件

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

// 導入生成瀏覽頁面的插件，得到一個構造函數 const HtmlWebpackPlugin = require('html-webpack-plugin') // 創建插件的實例對象 const htmlPlugin = new HtmlWebpackPlugin({template :'./src/index.html' , //指定要用到的模板文件filename:'index.html' //指定生成文件的名稱，該文件存在與內存中，在目錄中不顯示 })

修改 webpack.config.js 文件中向外暴露的配置文件，新增如下配置節點：

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

六、配置自動打包相關的參數

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

webpack中的加載器

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

在實際開發過程中，webpack 默認只能打包處理以 .js 后綴名結尾的模塊，其他非 .js后綴名結尾的模塊，webpack 默認處理不了，需要調用 loader 加載器才可以正常打包，否則會報錯！

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

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

2、loader 的調用過程**

webpack中加載器的基本使用

一、打包處理css 文件

運行 npm i style-loader css-loader -D 命令，安裝處理 css 文件的 loader

在 webpack.config.js 的module -> rules 數組中，添加 loader 規則如下：

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

其中， test 表示匹配的文件類型，use 表示對應要調用的 loader

注意：

use 數組中指定的 loader 順序是固定的
多個 loader 的調用順序是：從后往前調用

二、打包處理less文件

運行 npm i less-loader less -D 命令.

在 webpack.config.js 的module -> rules 數組中，添加 loader 規則如下：

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

三、打包處理scss文件

運行 npm i sass-loader node-sass -D 命令.

在 webpack.config.js 的module -> rules 數組中，添加 loader 規則如下：

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

四、配置 postCSS 自動添加 css 的兼容前綴

運行 npm i postcss-loader autoprefixer -D 命令.

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

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

在 webpack.config.js 的module -> rules 數組中，修改 css 的 loader 規則如下：

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

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

運行 npm i url-loader file-loader -D 命令.

在 webpack.config.js 的module -> rules 數組中，添加 loader 規則如下：

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

其中？之后的是 loader 的參數項

limit 用來指定圖片的大小，單位是字節（byte），只有小于 limit 大小的圖片，才會被轉為 base64圖片

六、打包處理 js 文件中的高級語法

安裝 bable轉換器相關的包：npm i babel-loader @babel/core @babel/runtime -D

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

在項目根目錄中，創建 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 數組中，添加 loader 規則如下：

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

Vue 單文件組件

一、Vue 單文件組件的基本用法（組成結構）

? template 組件的模塊區域
? script 業務邏輯區域
? style 樣式區域

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

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

運行 npm i vue-loader vue-template-compiler -D 命令.

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

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

三、在webpack 項目中使用 vue

運行 npm i vue -s 安裝 vue

在 src -> index.js 入口文件中，通過 import Vue from ‘vue’ 來導入 vue 構造函數

創建 vue 的實例對象，并指定要控制的 el 區域

通過 render 函數渲染 App 根組件

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

四、webpack打包發布

上線之前需要通過 webpack 將應用進行整體打包，可以通過package.json 文件配置打包命令：

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

注意：

? 最后在文件的端口下實行的命令為

npm run build

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

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

注意：

? 最后在文件的端口下實行的命令為

npm run build

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

webpack

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