Webpack：知識點(diǎn)總結(jié)以及遇到問題的處理辦法

2020-4-21    前端達(dá)人

文章目錄

0.官方文檔：

1.webpack概述：

2.webpack的基本使用：

3.在項(xiàng)目中安裝和配置 webpack：

4.配置自定義打包的自定義入口和出口：

4.配置自動打包功能：

5.配置生成預(yù)覽頁面功能：

6.配置自動打包相關(guān)參數(shù)：

7.webpack 中的加載器：

8.loader加載器的基本使用：

9.Vue單文件組件：

10.webpack 打包發(fā)布：

11.以上所有配置 webpack.config.js 截圖


1.webpack概述：
webpack是一個(gè)流行的前端項(xiàng)目構(gòu)建工具(打包工具) ,可以解決當(dāng)前web開發(fā)中所面臨的困境
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優(yōu)化等強(qiáng)大的功能,從而讓程序員把工作的重心放到具體的功能實(shí)現(xiàn)上,提高了開發(fā)效率和項(xiàng)目的可維護(hù)性

2.webpack的基本使用：
2.1：打開終端運(yùn)行命令 npm init -y 初始化包管理配置文件 package.json

2.2：新建 src 源文件目錄（里面放程序員自己寫的代碼比如 html css js images …）

2.3：如果需要引入 jquery 庫 終端運(yùn)行以下命令npm install jquery -S 安裝 jquery

自己在src文件夾中創(chuàng)建 index.js 引入下載的jquery包import $ from 'jquery'

3.在項(xiàng)目中安裝和配置 webpack：
3.1：終端運(yùn)行 npm install webpack-cli -D 命令，安裝webpack相關(guān)的包

這里要注意一個(gè)問題 : package.json 和 package-lock.json 文件里的名字默認(rèn)為 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的話為出現(xiàn)無法安裝的問題

具體可點(diǎn)擊這里 Webpack依賴包安裝問題解決方案
3.2：在項(xiàng)目根目錄中 ，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件

3.3：在 webpack.config.js 中，初始化一下基本配置

建議選擇 development （打包速度快，體積大），項(xiàng)目上線是才改成 production (如果選擇production會進(jìn)行代碼的壓縮和混淆，打包速度慢，體積小)

3.4：在package.json中的 script節(jié)點(diǎn) 新增一個(gè)dev腳本 值為 webpack ，就可以實(shí)現(xiàn)打包功能



  • 在終端運(yùn)行命令：npm run dev 就可以打包 默認(rèn)打包成main.js在 dist文件夾中

  • 在src自己新建的index.html 中引入打包后的 js




分享本文至：

日歷

鏈接

個(gè)人資料

存檔