webpack — 概述介紹

webpack概述

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

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

目前絕大多數企業中的前端項目，都是基于webpack進行打包構建的。
在這里插入圖片描述

webpack的基本使用

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

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

  2. 新建 src 源代碼目錄

  3. 新建 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/><!-- 將來要被 vue 控制的區域 --><div id="app"></div>
</body>
</html>

  4. 初始化首頁基本的結構

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

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

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

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

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

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

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

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

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

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

  5. 在終端中運行 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 的自動打包功能

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

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

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

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

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

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

    ? 注意：

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

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

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

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

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

  3. 修改 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 文件

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

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

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

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

    注意：

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

二、打包處理less文件

  1. 運行 npm i less-loader less -D 命令.
  2. 在 webpack.config.js 的module -> rules 數組中，添加 loader 規則如下：
    module:{rules:[.....{test:/\.less$/,use:['style-loader','css-loader','less-loader']},]}

三、打包處理scss文件

  1. 運行 npm i sass-loader node-sass -D 命令.
  2. 在 webpack.config.js 的module -> rules 數組中，添加 loader 規則如下：
    module:{rules:[......{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]}

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

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

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

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

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

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

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

  1. 運行 npm i url-loader file-loader -D 命令.
  2. 在 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 文件中的高級語法

  1. 安裝 bable轉換器相關的包：npm i babel-loader @babel/core @babel/runtime -D
  2. 安裝 bable語法插件相關的包： npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  3. 在項目根目錄中，創建 babel 配置文件 babel.config.js 并初始化基本配置如下：
module.exports = {presets:['@babel/preset-env'],plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
  1. 在 webpack.config.js 的module -> rules 數組中，添加 loader 規則如下：
 module:{rules:[......{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},]}

Vue 單文件組件

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

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

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

  1. 運行 npm i vue-loader vue-template-compiler -D 命令.
  2. 在 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

  1. 運行 npm i vue -s 安裝 vue
  2. 在 src -> index.js 入口文件中，通過 import Vue from ‘vue’ 來導入 vue 構造函數
  3. 創建 vue 的實例對象， 并指定要控制的 el 區域
  4. 通過 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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247957.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247957.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247957.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

徹底解決iOS項目中 _OBJC_CLASS_$_XXXService, referenced from: 的類似問題

徹底解決iOS項目中 _OBJC_CLASS_$_XXXService, referenced from: 的類似問題

這是大家熟悉的開發過程中可能遇到的問題 這是提交源碼到appStore不支持64位設備的提示 本人在提交項目到appStore時發生的的錯誤&#xff0c;提示必須要支持64的設備&#xff0c;然后自己趕緊進行相關的適應&#xff0c;出現了類似標題的問題&#xff0c;解決方法如下: 1、…
閱讀更多...
THUPCCTSAPIO2019：Far Away

THUPCCTSAPIO2019：Far Away

流水賬~ THUPC nmdwsmduliu&#xff01; THUPC Day -INF~Day -2 大概就是自己做題和每周兩次的考試&#xff0c;lsy和fcw兩個外校的來吊打我們qwqqq THUPC Day -1 Z208 長沙->北京 在車上看gzy/tjj/xzz打擺&#xff1f; THUPC Day 0 從火車站出來做地鐵的時候和tjj做反了可海…
閱讀更多...
UIDocumentInteractionController之程序間文檔共享

UIDocumentInteractionController之程序間文檔共享

iOS中的沙盒可以讓平臺更加的安全&#xff0c;這也是沙盒給用戶帶來的最主要好處。不過由于沙盒的嚴格限制&#xff0c;導致程序之間共享數據比較麻煩。一般在程序間共享文檔可以通過UIDocumentInteractionController類實現通訊。它支持在你的app中用其他app預覽和顯示文檔。同…
閱讀更多...
webpack — 概述 （2）

webpack — 概述 （2）

webpack學前必備 webpack中文網 webpack官網 1. Webpack 介紹 Webpack 是什么?? (面試) 前端模塊化打包工具WebPack可以看做是模塊打包機&#xff1a;它做的事情是&#xff0c;分析你的項目結構&#xff0c;找到JavaScript模塊、其它的一些瀏覽器不能直接運行的拓展語言…
閱讀更多...
VUE安裝依賴命令總結

VUE安裝依賴命令總結

以下是個人用到過的vue安裝包以及依賴命令&#xff08;在接觸項目時&#xff0c;有未寫到的會隨時補充&#xff09; 1. vuex 作用&#xff1a;vue狀態管理 安裝&#xff1a;npm install vuex --save 開源地址&#xff1a;github 文檔&#xff1a;https://vuex.vuejs.org/zh/ 2.…
閱讀更多...
SQL總結(快速參考)

SQL總結(快速參考)

SQL 語句 語句 語法 AND / OR SELECT column_name(s) FROM table_name WHERE condition AND|OR condition ALTER TABLE (add column) ALTER TABLE table_name ADD column_name datatype ALTER TABLE (drop column) ALTER TABLE table_name DROP COLUMN column_name AS (alias…
閱讀更多...
Vue -項目創建（rem適配項的設置）

Vue -項目創建（rem適配項的設置）

3. 項目rem 配置 ####3.1 rem介紹 小米、京東、攜程 m.mi.com/m.jd.com/m.ctrp.com 核心原理 1rem 當前 html 的fontSize也就是說 : rem是相當于根元素的字體大小// 使用div {width:2rem;height:2rem}// 媒體查詢media (min-width:320px) {html {font-size : 20px}}media (mi…
閱讀更多...
c#基礎知識梳理（四）

c#基礎知識梳理（四）

上期回顧 - https://www.cnblogs.com/liu-jinxin/p/10826971.html 一、類 當你定義一個類時&#xff0c;你定義了一個數據類型的藍圖。這實際上并沒有定義任何的數據&#xff0c;但它定義了類的名稱意味著什么&#xff0c;也就是說&#xff0c;類的對象由什么組成及在這個對象…
閱讀更多...
UIButton設置圓角和邊框及邊框顏色

UIButton設置圓角和邊框及邊框顏色

UIButton *testButton [UIButton buttonWithType:UIButtonTypeSystem];[testButton setFrame:CGRectMake(self.view.frame.size.width/2, self.view.frame.size.height/2, 100,100)];[testButton setTitle:"獲取屏幕尺寸" forState:UIControlStateNormal];[testButt…
閱讀更多...
Git 的介紹簡介

Git 的介紹簡介

使用 git 管理我們的項目并上傳到碼云 ##1. 本地管理 本地工作區 git add >暫存區 git commit > 倉庫區 git status : 查看我們的狀態 查看到很多紅色的 (有修改的 有刪除的 有添加的) git add . : 把當前所有文件添加到暫存區 git commit -m xxx 把代碼從暫存區 提交…
閱讀更多...
【王俊杰de人工智能實戰課】第7次作業2

【王俊杰de人工智能實戰課】第7次作業2

Brief Guide 項目內容這個作業屬于哪個課程北航人工智能實戰課這個作業的要求在哪里第三次作業要求我在這個課程的目標是獲得機器學習相關的完整項目與學習經驗&#xff1b;通過與人工智能行業的大牛們聊天了解行業不同方向的發展以便進行職業規劃&#xff1b;為轉CS積累基礎知…
閱讀更多...
讓UITableView的section header view不懸停的方法

讓UITableView的section header view不懸停的方法

當 UITableView 的 style 屬性設置為 Plain 時&#xff0c;這個tableview的section header在滾動時會默認懸停在界面頂端。取消這一特性的方法有兩種&#xff1a; 將 style 設置為 Grouped 。這時所有的section header都會隨著scrollview滾動了。不過 grouped 和 plain 的樣式…
閱讀更多...
Promise 的基本使用 與 Ajax的jQuery封裝

Promise 的基本使用 與 Ajax的jQuery封裝

Promise 的基本使用 為了解決回調地獄問題&#xff0c;從而給出的解決辦法&#xff1a; /*** Promise** 1. Promise 是 一個構造函數 new Vue()* 2. Promise() 里面有個參數, 參數就是一個回調 () > {}* 回調也有參數* resolve f 操作成功的時候調用resolve > …
閱讀更多...
個人沖刺9

個人沖刺9

1.昨天做了界面整體優化。 2.今天打算了解一下組成員的情況。 3.整體界面優化沒有什么問題。轉載于:https://www.cnblogs.com/Evak/p/10936840.html
閱讀更多...
iOS UITextField使用全攻略

iOS UITextField使用全攻略

//初始化textfield并設置位置及大小 UITextField *text [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //設置邊框樣式&#xff0c;只有設置了才會顯示邊框樣式 text.borderStyle UITextBorderStyleRoundedRect; typedef enum { UITextBorderStyleNone…
閱讀更多...
日期模糊查詢

日期模糊查詢

SELECT * FROM 表名 t WHERE(to_char(t.日期字段,yyyy-MM-dd hh24:mi:ss)like %2011%)轉載于:https://www.cnblogs.com/macT/p/10865206.html
閱讀更多...
Uboot中start.S源碼的指令級的詳盡解析（轉）

Uboot中start.S源碼的指令級的詳盡解析（轉）

Uboot中start.S源碼的指令級的詳盡解析轉載于:https://www.cnblogs.com/LittleTiger/p/10877516.html
閱讀更多...
Vuex說明及Todos項目改造

Vuex說明及Todos項目改造

Vuex(vue) / Flux (angular) /Redux(react) vuex 是什么? 狀態管理工具 狀態即數據, 狀態管理就是管理組件中的data數據 Vuex 中的狀態管理工具,采用了 集中式 方式統一管理項目中組件之間需要通訊的數據 [看圖] 如何使用 最佳實踐 : 只將組件之間共享的數據放在 vuex …
閱讀更多...
Objective-C 深復制和淺復制與NSCopying協議

Objective-C 深復制和淺復制與NSCopying協議

1.簡單復制只能實現淺拷貝&#xff1a;指針賦值&#xff0c;使兩個指針指向相同的一塊內存空間&#xff0c;操作不安全。 2. Foundation類已經遵守了<NSCopying>和 <NSMutableCopying>協議,即實現了copy和mutableCopy方法,因此Foundation對象可以使用這些方法創建對…
閱讀更多...
基于Vue項目打包上線配置

基于Vue項目打包上線配置

打包上線 開發階段 : npm run serve發布階段 : npm run build build之前 1. 把基準地址, 由開發階段的換成發布階段的 //main.js axios.defaults.baseURL http://localhost:30002. 忽略項目中打印的結果 // main.js console.log () > {}// 開發階段 > 注釋掉 >…
閱讀更多...
最新文章

Copyright @ 2022~2023