1.為什么要使用webpack：

因?yàn)槲覀兿氚奄Y源整合。如在項(xiàng)目index.html文件中為了請(qǐng)求變得更少我們可以新建一個(gè)叫main.js的項(xiàng)目入口文件(里面有引用其它的各種資源，而index.html里引用它就可以了)，但main.js里可能有些語(yǔ)法太高級(jí)了或用引入了其它js文件，所以會(huì)報(bào)錯(cuò)。這時(shí)候我們就可以使用weboack來(lái)處理main.js了(前提已全局安裝了webpack。全局安裝：npm i webpack)。

2. webpack處理main.js正常運(yùn)行項(xiàng)目：

2.1 處理main.js：可以使用 webpack .\src\main.js .\dist\bundle.js (意思是處理main.js文件處理好了之后把它打包為bundle.js，此時(shí)index.html引用 .\dist\bundle.js 就可以了，如果根目錄里沒(méi)有dist文件將會(huì)自動(dòng)生成)這樣我們就可以每次修改一下main.js文件就執(zhí)行一下 webpack .\src\main.js .\dist\bundle.js (重新處理main.js并重新打包為bundle.js )然后我們?cè)偎⑿乱幌聻g覽器，不過(guò)這樣太麻煩了。

2.2 簡(jiǎn)約方式處理main.js(目標(biāo)：我們修改完main.js之后終端執(zhí)行一下webpack就自動(dòng)處理并打包)：這時(shí)我們需要在當(dāng)前目錄(一般是根目錄)下新建一個(gè)webpack.config.js文件再里面配置需處理的文件路徑及處理好之后打包的文件路徑：

現(xiàn)在我們修改完main.js保存之后終端執(zhí)行webpack再刷新一下瀏覽器即可看到效果

2.3 更簡(jiǎn)約方式處理main.js(目標(biāo)：我們修改完main.js之后它自動(dòng)處理并打包并自動(dòng)刷新一下瀏覽器)：這時(shí)候webpack已經(jīng)不能滿足我們的需求了，我們需要安裝一個(gè)? webpack-dev-server 的包(它類似于node中的nodemon。安裝：npm i webpack-dev-server -D 安裝至項(xiàng)目的本地，但它依賴于項(xiàng)目本地webpack，所以哪怕你全局安裝webpack，還需要項(xiàng)目本地再安裝一次。安裝：npm i webpack -D)。

但是現(xiàn)在在終端輸入 webpack-dev-server 還是會(huì)報(bào)錯(cuò)因?yàn)榇斯ぞ甙粫?huì)全局安裝的，無(wú)法當(dāng)成腳本命令運(yùn)行。所以我們需要在package.json文件script腳本里配置一下：

現(xiàn)在我們?cè)诮K端執(zhí)行 npm run dev 即可開始自動(dòng)處理main.js并打包。打包完成后將返回一個(gè)根路徑端口號(hào)(此時(shí)終端并不會(huì)結(jié)束運(yùn)行依舊在監(jiān)聽代碼的修改然后自動(dòng)編譯，但頁(yè)面并不會(huì)更新)，根路徑后面其實(shí)會(huì)有一個(gè)打包之后的端口名(也叫bundle.js，但是看不見)/bundle.js 。注意這個(gè)叫 /bundle.js 的端口號(hào)不是磁盤目錄下的 ./dist/bundle.js 文件，它是直接放在了內(nèi)存中，所以運(yùn)行將會(huì)更快，所以此時(shí)磁盤目錄下的 /dist/bundle.js 文件只用來(lái)中間過(guò)渡了，因此我們?cè)趇ndex.html里應(yīng)該直接引用 /bundle.js ()。

現(xiàn)在我們執(zhí)行一次 npm run dev 再點(diǎn)擊返回的根路徑端口號(hào)之后(打開根路徑端口號(hào)之后進(jìn)入根目錄需手動(dòng)點(diǎn)一下src目錄)再修改完main.js將會(huì)自動(dòng)處理并打包且刷新瀏覽器

3. webpack-dev-server常用命令參數(shù)(可以package.json里配置也可在webpack.config.js里配置推薦第一種)：

--open ：自動(dòng)打開瀏覽器

--port 3000 ：設(shè)置打開瀏覽器端口號(hào)為3000

--contentBase src ：設(shè)置打開瀏覽器之后展示的內(nèi)容為src(默認(rèn)是根目錄要自己點(diǎn)一下src)

--hot ：局部更新(不再修改一下整體重新處理再生成一個(gè)新的包)

3.1 package.json配置：

3.2 webpack.config.js里配置：

4. 將磁盤中的index.html頁(yè)面也變成時(shí)內(nèi)存中的：

4.1：我們需要借助 html-webpack-plugin 這個(gè)包來(lái)實(shí)現(xiàn)(下載：npm i html-webpack-plugin -D)。

4.2：下載好包之后在webpack.config.js里引入并配置

4.2.1：引入：const htmlwebpackplugin = require(‘html-webpack-plugin)

4.2.2：配置：

至此磁盤中的index.html頁(yè)面將會(huì)拷貝一份為內(nèi)存中的index.html頁(yè)面(同樣我們還是看不見)，注意此時(shí)內(nèi)存的index.html頁(yè)面和磁盤中的一模一樣，但在最下面會(huì)自動(dòng)多引入一個(gè)bundle.js打包好的入口文件()，所以我們完全可以把磁盤中的index.html頁(yè)面里這行代碼刪除(這樣我們看起來(lái)什么都沒(méi)有引入了)。并且這個(gè)時(shí)候我們可以直接訪問(wèn)3000端口了，因?yàn)閮?nèi)存了也有一個(gè)首頁(yè)了，--contentBase src可以刪除了。(以后不用webpack引包，可以從/node_modules進(jìn)去了，因?yàn)檫@樣打開的就是根目錄了，node_modules就是在根目錄下的)。

5. webpack處理其它類型文件(webpack默認(rèn)只處理js文件)：

想處理其它類型的文件需在main.js里引入進(jìn)來(lái)后還需要安裝其它類型文件對(duì)對(duì)應(yīng)的loader包。

5.1 css：

首先main.js里引入(import ‘./css/index.css‘ 這里直接引入文件路徑即可，因?yàn)樗恍枰┞独锩娴某蓡T，把整個(gè)拿來(lái)用就可以了，除非還有 css.xx，一般js文件才 import xx from xx)，然后下載相應(yīng)的loader包)(處理sass時(shí)除了下載它的loader包還要把sass本身下載一下 npm inode-sass-D；less也是一樣還需下載 npm i less -D)：

然后在webpack.config.js里配置(注意webpack引用各種loader時(shí)是在配置里從后往前引用)：

5.2 url地址：

5.2.1 url圖片 ：假如我們?cè)赾ss文件里通過(guò)background: url(‘./xx/xx.jog‘)，這時(shí)候webpack肯定處理不了的，一樣的需要下載對(duì)應(yīng)的loader再配置。

下載：npm i url-loader file-loader -D

配置：

limit是圖片的大小尺寸，[hash: 8 ]- 是在圖片前面加8位嘻哈，防止圖片名字一樣時(shí)后者會(huì)代替前者(最高32位，圖片默認(rèn)是base64編碼)，[name].[ext]是讓圖片名字和格式都是自己原本的不是默認(rèn)的base64編碼。

5.2.2 字體文件：比如我們 npm i bootstrp -S 下載好bootstrap后在main.js里引入一下 (通過(guò)路徑引入node_modules里的文件node_modules可以省略不寫)。配置：

6. webpack中將高級(jí)語(yǔ)法轉(zhuǎn)為低級(jí)語(yǔ)法(默認(rèn)支持部分ES6語(yǔ)法，需下載兩套包來(lái)實(shí)現(xiàn))：

7. webpack中使用vue(index里有一個(gè)容器接收main.js文件中vm實(shí)例里el的指向即可，因?yàn)榇藭r(shí)我們的index已運(yùn)行在內(nèi)存中，它自動(dòng)多加了一個(gè)引入打包好的bundle.js文件)：

在main.js里 import Vue from ‘vue‘ 時(shí)得到的是不完整的vue(可以根據(jù)查找規(guī)則最終找到main發(fā)現(xiàn)指向的是vue.runtime.common.js)。這時(shí)要么我們手動(dòng)修改main里的指向?yàn)関ue.js，要么在main.js里 import Vue from ‘../node_modules/xx/vue.js‘，要么在webpack.config.js 里加一個(gè)配置(讓main發(fā)現(xiàn)是以vue結(jié)尾的文件時(shí)指向vue.js)：

8. webpack中使用vue組件(一般我們喜歡把組件都放在一個(gè)vue文件里，所以首先要有一個(gè)解析vue文件的loader)：

這時(shí)就可以正常的引入vue文件里的組件了。如果引入的vue是不完整的，這是還想使用組件的方式如下：

原文：https://www.cnblogs.com/fxw1/p/14141250.html

總結(jié)

以上是生活随笔為你收集整理的vue webpack 自动打开页面_vue中webpack技术详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。