1.為什么要使用webpack：

因為我們想把資源整合。如在項目index.html文件中為了請求變得更少我們可以新建一個叫main.js的項目入口文件(里面有引用其它的各種資源，而index.html里引用它就可以了)，但main.js里可能有些語法太高級了或用引入了其它js文件，所以會報錯。這時候我們就可以使用weboack來處理main.js了(前提已全局安裝了webpack。全局安裝：npm i webpack)。

2. webpack處理main.js正常運行項目：

2.1 處理main.js：可以使用 webpack .\src\main.js .\dist\bundle.js (意思是處理main.js文件處理好了之后把它打包為bundle.js，此時index.html引用 .\dist\bundle.js 就可以了，如果根目錄里沒有dist文件將會自動生成)這樣我們就可以每次修改一下main.js文件就執行一下 webpack .\src\main.js .\dist\bundle.js (重新處理main.js并重新打包為bundle.js )然后我們再刷新一下瀏覽器，不過這樣太麻煩了。

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

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

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

但是現在在終端輸入 webpack-dev-server 還是會報錯因為此工具包不會全局安裝的，無法當成腳本命令運行。所以我們需要在package.json文件script腳本里配置一下：

現在我們在終端執行 npm run dev 即可開始自動處理main.js并打包。打包完成后將返回一個根路徑端口號(此時終端并不會結束運行依舊在監聽代碼的修改然后自動編譯，但頁面并不會更新)，根路徑后面其實會有一個打包之后的端口名(也叫bundle.js，但是看不見)/bundle.js 。注意這個叫 /bundle.js 的端口號不是磁盤目錄下的 ./dist/bundle.js 文件，它是直接放在了內存中，所以運行將會更快，所以此時磁盤目錄下的 /dist/bundle.js 文件只用來中間過渡了，因此我們在index.html里應該直接引用 /bundle.js ()。

現在我們執行一次 npm run dev 再點擊返回的根路徑端口號之后(打開根路徑端口號之后進入根目錄需手動點一下src目錄)再修改完main.js將會自動處理并打包且刷新瀏覽器

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

--open ：自動打開瀏覽器

--port 3000 ：設置打開瀏覽器端口號為3000

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

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

3.1 package.json配置：

3.2 webpack.config.js里配置：

4. 將磁盤中的index.html頁面也變成時內存中的：

4.1：我們需要借助 html-webpack-plugin 這個包來實現(下載：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頁面將會拷貝一份為內存中的index.html頁面(同樣我們還是看不見)，注意此時內存的index.html頁面和磁盤中的一模一樣，但在最下面會自動多引入一個bundle.js打包好的入口文件()，所以我們完全可以把磁盤中的index.html頁面里這行代碼刪除(這樣我們看起來什么都沒有引入了)。并且這個時候我們可以直接訪問3000端口了，因為內存了也有一個首頁了，--contentBase src可以刪除了。(以后不用webpack引包，可以從/node_modules進去了，因為這樣打開的就是根目錄了，node_modules就是在根目錄下的)。

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

想處理其它類型的文件需在main.js里引入進來后還需要安裝其它類型文件對對應的loader包。

5.1 css：

首先main.js里引入(import ‘./css/index.css‘ 這里直接引入文件路徑即可，因為它不需要暴露里面的成員，把整個拿來用就可以了，除非還有 css.xx，一般js文件才 import xx from xx)，然后下載相應的loader包)(處理sass時除了下載它的loader包還要把sass本身下載一下 npm inode-sass-D；less也是一樣還需下載 npm i less -D)：

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

5.2 url地址：

5.2.1 url圖片 ：假如我們在css文件里通過background: url(‘./xx/xx.jog‘)，這時候webpack肯定處理不了的，一樣的需要下載對應的loader再配置。

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

配置：

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

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

6. webpack中將高級語法轉為低級語法(默認支持部分ES6語法，需下載兩套包來實現)：

7. webpack中使用vue(index里有一個容器接收main.js文件中vm實例里el的指向即可，因為此時我們的index已運行在內存中，它自動多加了一個引入打包好的bundle.js文件)：

在main.js里 import Vue from ‘vue‘ 時得到的是不完整的vue(可以根據查找規則最終找到main發現指向的是vue.runtime.common.js)。這時要么我們手動修改main里的指向為vue.js，要么在main.js里 import Vue from ‘../node_modules/xx/vue.js‘，要么在webpack.config.js 里加一個配置(讓main發現是以vue結尾的文件時指向vue.js)：

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

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

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

總結

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

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