文章目錄

• 💦 webpack的概念
• 💦 webpack的基本使用
• • • 項目目錄并初始化
    • 創建首頁及js文件
    • 以jQuery為例安裝jQuery
    • 導入jQuery
    • 安裝webpack
• 💦 webpack的相關設置
• • • 設置webpack的打包入口/出口
    • 設置webpack的自動打包
    • 配置html-webpack-plugin
    • webpack中的加載器
• 💦 使用webpack打包發布項目
• 💦 在webpack中使用vue
• • • Vue單文件組件
    • 在webpack中使用vue
• 💦寫在最后

💦 webpack的概念

webpack是一個流行的前端項目構建工具，可以解決目前web開發的困境。他的核心概念是一個模塊打包工具,它的主要目標是將js文件打包在一起,打包后的文件用于在瀏覽器中使用,但它也能勝任轉換(transform)、打包(bundle)或包裹(package)任何其他資源。
webpack提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優化等特性，提高了開發效率和項目的可維護性。

💦 webpack的基本使用

項目目錄并初始化

創建項目，并打開項目所在目錄的終端，輸入命令：

npm init -y

創建首頁及js文件

在項目目錄中創建index.html頁面，并初始化頁面結構：在頁面中擺放一個ul，ul里面放置幾個li
在項目目錄中創建js文件夾，并在文件夾中創建index.js文件

以jQuery為例安裝jQuery

打開項目目錄終端，輸入命令:

npm install jQuery -S

導入jQuery

打開index.js文件，編寫代碼導入jQuery并實現功能：

import $ from "jquery"; $(function(){$("li:odd").css("background","cyan");$("li:odd").css("background","pink"); })

注意：此時項目運行會有錯誤，因為import $ from “jquery”;這句代碼屬于ES6的新語法代碼，在瀏覽器中可能會存在兼容性問題
所以我們需要webpack來幫助我們解決這個問題。

安裝webpack

打開項目目錄終端，輸入命令:
npm install webpack webpack-cli -D

然后在項目根目錄中，創建一個 webpack.config.js 的配置文件用來配置webpack
在 webpack.config.js 文件中編寫代碼進行webpack配置，如下：
module.exports = {
mode:“development”//可以設置為development(開發模式)，production(發布模式)
}
補充：mode設置的是項目的編譯模式。
如果設置為development則表示項目處于開發階段，不會進行壓縮和混淆，打包速度會快一些
如果設置為production則表示項目處于上線發布階段，會進行壓縮和混淆，打包速度會慢一些

修改項目中的package.json文件添加運行腳本dev，如下：
“scripts”:{
“dev”:“webpack”
}
注意：scripts節點下的腳本，可以通過 npm run 運行，如：
運行終端命令：npm run dev
將會啟動webpack進行項目打包

運行dev命令進行項目打包，并在頁面中引入項目打包生成的js文件
打開項目目錄終端，輸入命令:
npm run dev
等待webpack打包完畢之后，找到默認的dist路徑中生成的main.js文件，將其引入到html頁面中。
瀏覽頁面查看效果。

💦 webpack的相關設置

設置webpack的打包入口/出口

在webpack 4.x中，默認會將src/index.js 作為默認的打包入口js文件
默認會將dist/main.js 作為默認的打包輸出js文件
如果不想使用默認的入口/出口js文件，我們可以通過改變 webpack.config.js 來設置入口/出口的js文件，如下：

const path = require("path"); module.exports = {mode:"development",//設置入口文件路徑entry: path.join(__dirname,"./src/xx.js"),//設置出口文件output:{//設置路徑path:path.join(__dirname,"./dist"),//設置文件名filename:"res.js"} }

設置webpack的自動打包

默認情況下，我們更改入口js文件的代碼，需要重新運行命令打包webpack，才能生成出口的js文件
那么每次都要重新執行命令打包，這是一個非常繁瑣的事情，那么，自動打包可以解決這樣繁瑣的操作。
實現自動打包功能的步驟如下：
1.安裝自動打包功能的包:webpack-dev-server

npm install webpack-dev-server -D

2.修改package.json中的dev指令如下：

"scripts":{"dev":"webpack-dev-server"}

3.將引入的js文件路徑更改為：

<script src="/bundle.js"></script>

4.運行npm run dev，進行打包
5.打開網址查看效果：http://localhost:8080

注意：
webpack-dev-server自動打包的輸出文件，默認放到了服務器的根目錄中。
補充：
在自動打包完畢之后，默認打開服務器網頁，實現方式就是打開package.json文件，修改dev命令：

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

配置html-webpack-plugin

使用html-webpack-plugin 可以生成一個預覽頁面。

因為當我們訪問默認的 http://localhost:8080/的時候，看到的是一些文件和文件夾，想要查看我們的頁面,還需要點擊文件夾點擊文件才能查看，那么我們希望默認就能看到一個頁面，而不是看到文件夾或者目錄。

實現默認預覽頁面功能的步驟如下：
1.安裝默認預覽功能的包:html-webpack-plugin

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文件，添加plugins信息：

module.exports = {......plugins:[ htmlPlugin ]}

webpack中的加載器

通過loader打包非js模塊：默認情況下，webpack只能打包js文件，如果想要打包非js文件，需要調用loader加載器才能打包
loader加載器包含：
1).less-loader
2).sass-loader
3).url-loader:打包處理css中與url路徑有關的文件
4).babel-loader:處理高級js語法的加載器
5).postcss-loader
6).css-loader,style-loader

注意：指定多個loader時的順序是固定的，而調用loader的順序是從后向前進行調用

💦 使用webpack打包發布項目

在項目上線之前，我們需要將整個項目打包并發布。
1.配置package.json

"scripts":{"dev":"webpack-dev-server","build":"webpack -p"}

2.在項目打包之前，可以將dist目錄刪除，生成全新的dist目錄

💦 在webpack中使用vue

Vue單文件組件

傳統Vue組件的缺陷：
全局定義的組件不能重名，字符串模板缺乏語法高亮，不支持css(當html和js組件化時，css沒有參與其中)
沒有構建步驟限制，只能使用H5和ES5，不能使用預處理器（babel）

在webpack中使用vue

我們安裝處理了vue單文件組件的加載器，想要讓vue單文件組件能夠使用，我們必須要安裝vue
并使用vue來引用vue單文件組件。
1.安裝Vue

npm install vue -S

2.在index.js中引入vue：

import Vue from “vue”

3.創建Vue實例對象并指定el，最后使用render函數渲染單文件組件

const vm = new Vue({el:"#one",render:h=>h(app)})

💦寫在最后

?$原創不易，希望大家多多支持！！！$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$

總結

以上是生活随笔為你收集整理的到现在了还不会Webpack？我帮你总结好了的全部內容，希望文章能夠幫你解決所遇到的問題。

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