當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue—相关工具—webpack

發布時間：2024/4/15 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue—相关工具—webpack 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文地址：webpack快速入門

8.webpack

8.1.安裝

8.2.核心概念

8.3.編寫webpack配置

8.3.1.入口entry

8.3.2.出口output

8.4.執行打包

8.5.測試運行

8.6.打包CSS

8.6.1.安裝加載器

8.6.3.index.js引入css文件

8.6.4.配置加載器

8.6.5.重新打包

8.7.script腳本

8.8.打包HTML

8.9.熱更新的web服務

8.webpack

Webpack 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模塊進行打包。

中文官方網站：https://www.webpackjs.com/

官網給出的解釋：

本質上，webpack?是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個?bundle。

為什么需要打包？

將許多碎小文件打包成一個整體，減少單頁面內的衍生請求次數，提高網站效率。
將ES6的高級語法進行轉換編譯，以兼容老版本的瀏覽器。
將代碼打包的同時進行混淆，提高代碼的安全性。

8.1.安裝

webpack支持全局安裝和本地安裝，官方推薦是本地安裝，我們按照官方的來。

安裝最新版本webpack，輸入命令：npm install --save-dev webpack

?webpack 4+ 版本，你還需要安裝 CLI ，輸入命令：npm install webpack webpack-cli --save-dev

此時，我們注意下項目中文件夾下，會有一個package.json文件。（其實早就有了）

打開文件，可以看到我們之前用npm安裝過的文件都會出現在這里：

8.2.核心概念

學習Webpack，你需要先理解四個核心概念：

入口(entry)

webpack打包的起點，可以有一個或多個，一般是js文件。webpack會從啟點文件開始，尋找啟點直接或間接依賴的其它所有的依賴，包括JS、CSS、圖片資源等，作為將來打包的原始數據
輸出(output)

出口一般包含兩個屬性：path和filename。用來告訴webpack打包的目標文件夾，以及文件的名稱。目的地也可以有多個。
加載器（loader）

webpack本身只識別Js文件，如果要加載非JS文件，必須指定一些額外的加載器（loader），例如css-loader。然后將這些文件轉為webpack能處理的有效模塊，最后利用webpack的打包能力去處理。
插件(plugins)

插件可以擴展webpack的功能，讓webpack不僅僅是完成打包，甚至各種更復雜的功能，或者是對打包功能進行優化、壓縮，提高效率。

8.3.編寫webpack配置

接下來，我們編寫一個webpack的配置，來指定一些打包的配置項。配置文件的名稱，默認就是webpack.config.js，我們放到hello-vue的根目錄：

配置文件中就是要指定上面說的四個核心概念，入口、出口、加載器、插件。

不過，加載器和插件是可選的。我們先編寫入口和出口

8.3.1.入口entry

webpack打包的啟點，可以有一個或多個，一般是js文件。現在思考一下我們有沒有一個入口？貌似沒有，我們所有的東西都集中在index.html，不是一個js，那怎么辦？

我們新建一個js，把index.html中的部分內容進行集中，然后在index.html中引用這個js不就OK了！

然后把原來index.html中的js代碼全部移動到index.js中

// 使用es6的語法導入js模塊 import Vue from '../node_modules/vue/dist/vue'; import VueRouter from '../node_modules/vue-router/dist/vue-router'; import loginForm from './user/login'; import registerForm from './user/register';Vue.use(VueRouter);// 創建vue對象 const router = new VueRouter({routes: [ // 編寫路由規則// path: 路由請求路徑；component：組件名稱{path: "/login", component: loginForm},{path: "/register", component: registerForm}] }); var vm = new Vue({el: "#app",components: {loginForm,registerForm},router });

原來的index.html中引入了很多其它js，在這里我們使用es6的import語法進行導入。

注意，要使用import，就需要在login.js和register.js中添加export導出語句：
const loginForm={template: '\<div>\<h2>登陸頁</h2>\用戶名：<input type="text"><br>\密&emsp;碼：<input type="password">\</div>', } export default loginForm;
register.js:
const registerForm = {template:'\<div>\<h2>注冊頁</h2> \用&ensp;戶&ensp;名：<input type="text"><br/>\密&emsp;&emsp;碼：<input type="password"><br/>\確認密碼：<input type="password"><br/>\</div>\' } export default registerForm;
vue-router使用模塊化加載后，必須增加一句：Vue.use(VueRouter)

這樣，index.js就成了我們整個配置的入口了。

我們在webpack.config.js中添加以下內容：

module.exports={entry:'./src/index.js', //指定打包的入口文件 }

8.3.2.出口output

出口，就是輸出的目的地。一般我們會用一個dist目錄，作為打包輸出的文件夾：

然后，編寫webpack.config.js，添加出口配置：

module.exports={entry:'./src/main.js', //指定打包的入口文件output:{// path: 輸出的目錄，__dirname是相對于webpack.config.js配置文件的絕對路徑path : __dirname+'/dist', filename:'build.js' //輸出的js文件名} }

8.4.執行打包

在控制臺輸入以下命令：

npx webpack --config webpack.config.js

隨后，查看dist目錄：

嘗試打開build.js，你根本看不懂：

所有的js合并為1個，并且對變量名進行了隨機打亂，這樣就起到了壓縮、混淆的作用。

8.5.測試運行

在index.html中引入剛剛生成的build.js文件，

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><span><router-link to="/login">登錄</router-link></span><span><router-link to="/register">注冊</router-link></span><hr/><div><router-view></router-view></div></div><script src="../dist/build.js"></script> </body> </html>

然后運行：

8.6.打包CSS

我們來編寫一段CSS代碼，對index的樣式做一些美化：

內容：

#app a{display: inline-block;width: 150px;line-height: 30px;background-color: dodgerblue;color: white;font-size: 16px;text-decoration: none; } #app a:hover{background-color: whitesmoke;color: dodgerblue; } #app div{width: 300px;height: 150px; } #app{width: 305px;border: 1px solid dodgerblue; }

8.6.1.安裝加載器

前面說過，webpack默認只支持js加載。要加載CSS文件，必須安裝加載器：

命令：npm install style-loader css-loader --save-dev

此時，在package.json中能看到新安裝的：

8.6.3.index.js引入css文件

因為入口在index.js，因此css文件也要在這里引入。依然使用ES6 的模塊語法：

import './css/main.css'

8.6.4.配置加載器

在webpack.config.js配置文件中配置css的加載器

module.exports = {entry: './src/main.js', //指定打包的入口文件output: {path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑filename: 'build.js' //輸出文件},module: {rules: [{test: /\.css$/, // 通過正則表達式匹配所有以.css后綴的文件use: [ // 要使用的加載器，這兩個順序一定不要亂'style-loader','css-loader']}]} }

8.6.5.重新打包

再次輸入打包指令：npx webpack --config webpack.config.js

效果：(如果之前訪問過,最好先關閉瀏覽器)

8.7.script腳本

我們每次使用npm安裝，都會在package.json中留下痕跡，事實上，package.json中不僅可以記錄安裝的內容，還可編寫腳本，讓我們運行命令更加快捷。

我們可以把webpack的命令編入其中：

以后，如果要打包，就可以直接輸入：npm run build即可。

npm run?：執行npm腳本，后面跟的是配置腳本的名稱build

8.8.打包HTML

之前的打包過程中，除了HTML文件外的其它文件都被打包了，當在線上部署時，我們還得自己復制HTML到dist，然后手動添加生成的js到HTML中，這非常不友好。

webpack中的一個插件：html-webpack-plugin，可以解決這個問題。

1）安裝插件：npm install --save-dev html-webpack-plugin

還需要在webpack.config.js中添加插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/main.js', //指定打包的入口文件output: {path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑filename: 'build.js' //輸出文件},module: {rules: [{test: /\.css$/, // 通過正則表達式匹配所有以.css后綴的文件use: [ // 要使用的加載器，這兩個順序一定不要亂'style-loader','css-loader']}]},plugins:[new HtmlWebpackPlugin({title: '首頁', //生成的頁面標題<head><title>首頁</title></head>filename: 'index.html', // dist目錄下生成的文件名template: './src/index.html' // 我們原來的index.html，作為模板})] }

2）將原來HTML中的引入js代碼刪除：

3）再次打包：npm run build

4）查看dist目錄：

打開index.html，發現已經自動添加了當前目錄下的build.js

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><span><router-link to="/login">登錄</router-link></span><span><router-link to="/register">注冊</router-link></span><div><router-view></router-view></div></div> <script type="text/javascript" src="build.js"></script></body> </html>

8.9.熱更新的web服務

剛才的案例中，每次修改任何js或css內容，都必須重新打包，非常麻煩。

webpack給我們提供了一個插件，可以幫我們運行一個web服務，加載頁面內容，并且修改js(css,html也可以)后不需要重新加載就能看到最新結果：

1）安裝插件：npm install webpack-dev-server --save-dev

2）添加啟動腳本

在package.json中配置script

"scripts": {"dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"},

--inline：自動刷新

--hot：熱加載

--port：指定端口

--open：自動在默認瀏覽器打開

--host：可以指定服務器的 ip，不指定則為127.0.0.1

3）運行腳本：npm run dev

4）效果：

總結

以上是生活随笔為你收集整理的Vue—相关工具—webpack的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Vue—基础概念—路由（vue-rout
下一篇： Vue—相关工具—vue-cli