2020-4-21 前端達人
文章目錄
0.官方文檔：
1.webpack概述：
2.webpack的基本使用：
3.在項目中安裝和配置 webpack：
4.配置自定義打包的自定義入口和出口：
4.配置自動打包功能：
5.配置生成預覽頁面功能：
6.配置自動打包相關參數：
7.webpack 中的加載器：
8.loader加載器的基本使用：
9.Vue單文件組件：
10.webpack 打包發布：
11.以上所有配置 webpack.config.js 截圖
1.webpack概述：
webpack是一個流行的前端項目構建工具(打包工具) ,可以解決當前web開發中所面臨的困境
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能,從而讓程序員把工作的重心放到具體的功能實現上,提高了開發效率和項目的可維護性
2.webpack的基本使用：
2.1：打開終端運行命令 npm init -y 初始化包管理配置文件 package.json
2.2：新建 src 源文件目錄（里面放程序員自己寫的代碼比如 html css js images …）
2.3：如果需要引入 jquery 庫 終端運行以下命令npm install jquery -S 安裝 jquery
自己在src文件夾中創建 index.js 引入下載的jquery包import $ from 'jquery'
3.在項目中安裝和配置 webpack：
3.1：終端運行 npm install webpack-cli -D 命令，安裝webpack相關的包
這里要注意一個問題 : package.json 和 package-lock.json 文件里的名字默認為 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的話為出現無法安裝的問題
具體可點擊這里 Webpack依賴包安裝問題解決方案
3.2：在項目根目錄中 ，創建名為 webpack.config.js 的 webpack 配置文件
3.3：在 webpack.config.js 中，初始化一下基本配置
建議選擇 development （打包速度快，體積大），項目上線是才改成 production (如果選擇production會進行代碼的壓縮和混淆，打包速度慢，體積小)
3.4：在package.json中的 script節點 新增一個dev腳本 值為 webpack ，就可以實現打包功能
在終端運行命令：npm run dev 就可以打包 默認打包成main.js在 dist文件夾中
在src自己新建的index.html 中引入打包后的 js