2020-4-21 前端達(dá)人
文章目錄
0.官方文檔：
1.webpack概述：
2.webpack的基本使用：
3.在項(xiàng)目中安裝和配置 webpack：
4.配置自定義打包的自定義入口和出口：
4.配置自動(dòng)打包功能：
5.配置生成預(yù)覽頁(yè)面功能：
6.配置自動(dòng)打包相關(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開(kāi)發(fā)中所面臨的困境
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問(wèn)題、性能優(yōu)化等強(qiáng)大的功能,從而讓程序員把工作的重心放到具體的功能實(shí)現(xiàn)上,提高了開(kāi)發(fā)效率和項(xiàng)目的可維護(hù)性
2.webpack的基本使用：
2.1：打開(kāi)終端運(yùn)行命令 npm init -y 初始化包管理配置文件 package.json
2.2：新建 src 源文件目錄（里面放程序員自己寫的代碼比如 html css js images …）
2.3：如果需要引入 jquery 庫(kù) 終端運(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è)問(wèn)題 : package.json 和 package-lock.json 文件里的名字默認(rèn)為 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的話為出現(xiàn)無(wú)法安裝的問(wèn)題
具體可點(diǎn)擊這里 Webpack依賴包安裝問(wèn)題解決方案
3.2：在項(xiàng)目根目錄中 ，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件
3.3：在 webpack.config.js 中，初始化一下基本配置
建議選擇 development （打包速度快，體積大），項(xiàng)目上線是才改成 production (如果選擇production會(huì)進(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
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com