🔥Vue🔥

🔥Vue全家桶	地址
🔥Vue全家桶之Vue基礎指令(一)	https://blog.csdn.net/Augenstern_QXL/article/details/120117044
🔥Vue全家桶之Vue組件化開發(二)	https://blog.csdn.net/Augenstern_QXL/article/details/120117322
🔥Vue全家桶之VueCLI 腳手架V2→V4版本(三)	https://blog.csdn.net/Augenstern_QXL/article/details/120117453
🔥Vue全家桶之webpack詳解(四)	https://blog.csdn.net/Augenstern_QXL/article/details/120297794
🔥Vue全家桶之Vue-router路由(五)	https://blog.csdn.net/Augenstern_QXL/article/details/120339146
🔥Vue全家桶之VueX(六)	https://blog.csdn.net/Augenstern_QXL/article/details/120339600

配套視頻講解: CoderWhy老師的Vuejs講解

1、認識webpack

在ES6之前，我們相要進行模塊化開發，就必須借助于其他的工具，讓我們可以進行模塊化開發
并且在通過模塊化開發完成了專案后，還需要處理模塊間的各種依賴，并且將其進行整合打包
而webpack其中一個核心就是讓我們可能進行模塊化開發，并且會幫助我們處理模塊間的依賴關系，
而且不僅僅是 JavaScript 檔案，我們的CSS、圖片、json檔案等等在webpack中都可以被當做模塊來使用
這就是webpack模塊化的概念

1.1、打包

理解了webpack可以幫助我們進行模塊化，并且處理模塊間的各種復雜關系后，打包的概念就非常好理解了
就是將webpack的各種資源模塊進行打包整合成一個或多個包Bundle
并且在打包的程序中，還可以對資源進行處理，比如壓縮圖片，將scss轉成css，將ES6語法轉成ES5語法，將TypeScript轉成JavaScript等等操作
但是打包的操作似乎 grunt/gulp 也可以幫助我們完成，它們有什么不同呢？

1.2、和grunt/gulp的對比

grunt / gulp 的核心是 Task

我們可以配置一系列的 task，并且定義 task 要處理的事務(例如ES6,ts轉化，圖片壓縮，scss轉成css)
之后讓 grunt / gulp 來依次執行這些 task，而且讓整個流程自動化
所以 grunt / gulp 也被稱為前端自動化任務管理工具

我們來看一個 gulp 的task

下面的 task 就是將 src 下面的所有 js 檔案轉成 ES5 的語法
并且最終輸出到 dist 檔案夾中

在這里插入圖片描述

什么時候用 grunt / gulp 呢？

如果你都工程模塊依賴非常簡單，甚至是沒有用到模塊化的概念
只需要進行簡單的合并、壓縮，就使用 grunt / gulp 即可
但是如果整個專案使用了模塊化管理，而且相互依賴非常強，我們就可以使用更加強大的webpack了

1.3、安裝webpack

安裝webpack首先需要安裝Node.js，Node.js自帶了軟體包管理工具npm

1.3.1、安裝node.js

老師的版本是 10.13.0 ，我自身安裝的是14.15.0版本，所以需要進行卸載
所有nodejs歷史版本的鏈接： https://nodejs.org/dist/
找到10.13.0，里面是 nodejs V10.13.0所有型別安裝檔案
- .msi 使用這個不用配置環境變數
- .zip 解壓即可用，但是需要配置環境變數
我這里下載 .msi 后綴檔案
雙擊下載完成的 node-v10.13.0-x64.msi ,點擊next

在這里插入圖片描述

勾選同意

在這里插入圖片描述

更改為你認為合適的安裝路徑

在這里插入圖片描述

點擊next
- npm package manage 表示 npm包管理器
- online documentation shortcuts 在線檔案快捷方式
- Add to Path 添加 node 安裝路徑到環境變數
- 這就是.msi 不需要手動添加環境變數的原因，node已經幫我們配置好了

在這里插入圖片描述

是否勾選工具去編譯 native 模塊，我們不勾選

在這里插入圖片描述

點擊 install

在這里插入圖片描述

等待安裝完畢

1.3.2、測驗

使用管理員方式打開dos視窗，輸入 node -v

在這里插入圖片描述

顯示如圖樣式，則安裝成功

1.3.3、更改淘寶鏡像

管理員方式打開DOS視窗，輸入

npm config set registry https://registry.npm.taobao.org

點擊回車就更換成功了，可以通過

npm config get registry

上面命令去查看是否成功，如果回傳是

在這里插入圖片描述

則更換成功

1.3.4、全域安裝webpack

在DOS命令視窗中輸入 npm install webpack@3.6.0 -g 安裝webpack(這里指定版本號3.6.0，因為 vue cli2 依賴該版本)
其中的 -g 代表是全域安裝，全域安裝可以在電腦任何一個位置執行webpack指令
安裝需要3~5分鐘，之后出現可以讓你輸入的命令列就說明安裝完成，如下圖

在這里插入圖片描述

在DOS命令視窗輸入
```
webpack --version
```
注意是兩個橫線

在這里插入圖片描述

如果你看到3.6.0，說明你已經成功安裝了webpack3.6.0

2、準備作業

首先創建如下檔案和檔案夾

dist檔案夾：用于存放之后打包的檔案
src 檔案夾：用于存放我們寫的源檔案
- main.js 專案的入口檔案
- mathUtils.js 定義了一些數學工具函式，可以在其他地方參考，并且使用，
index.html 瀏覽器打開展示的首頁html
package.json 通過 npm init 生成的，npm 包管理的檔案

在這里插入圖片描述

2.1、js檔案的打包

現在的 js 檔案中使用了模塊化的方式進行開發，他們可以直接使用嗎？不可以，

因為如果直接在 index.html 引入這兩個 js 檔案，瀏覽器并不識別其中的模塊化代碼，
另外，在真實專案當中有許多這樣的 js 檔案時，我們一個個參考非常麻煩，并且后期非常不方便對它們進行管理

我們應該使用webpack工具，對多個 js 檔案進行打包

webpack src/main.js dist/bundle.js

2.2、使用打包后的檔案

打包后會在 dist 檔案夾下，生成一個 bundle.js 檔案

此檔案是 webpack 處理了專案直接檔案依賴后生成的一個 js 檔案，我們只需要將這個 js 檔案在 index.html 中引入即可

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

2.3、示例

例如，我們使用模塊化開發兩個js檔案

在這里插入圖片描述

之后在 main.js 中進行引入兩個js檔案，在Termial終端使用 webpack 打包main.js

// 將src下的main.js 打包到dist目錄下然后命名為bundle.js
webpack src/main.js dist/bundle.js

在這里插入圖片描述

所以我們就知道了，我們以后在 src 下開發，之后讓 webpack 打包main.js，然后我們參考打包后的js檔案，這就是我們的開發模式，

3、webpack配置

3.0、mode節點的可選值

module.exports = {
    mode: 'development',		// mode 用來指定構建模式,可選值有 development 和 production
}

mode 節點的可選值有兩個，分別是：

development
- 開發環境
- 不會堆打包生成的檔案進行代碼壓縮和性能優化
- 打包速度快，適合在開發階段使用
production
- 生產環境
- 會對打包生成的檔案進行代碼壓縮和性能優化
- 打包速度很慢，僅適合在專案發布階段使用

3.1、入口和出口

每次使用webpack的命令都需要寫上入口和出口作為引數，非常麻煩，有沒有一種方法可以將者兩個引數寫到配置中，在運行時，直接讀取呢？

當然可以，就是創建一個 webpack.config.js 檔案
- 通過 entry 節點指定打包的入口
- 通過 output 節點指定打包的出口

const path = require('path')

module.exports = {
    // 入口:可以是字串/陣列/物件，我們這里的入口只有一個，所以寫一個字串即可
    entry: './src/main.js',
    // entry: path.join(__dirname,'./src/index.js')
    
    // 出口:通常是一個物件,里面至少包含兩個重要屬性,path 和 filename
    output :{
        // 注意: path通常是一個絕對路徑
        path: path.resolve(__dirname,'dist'),
        // 輸出檔案目錄
        filename: 'bundle.js'
    }
}

這樣配置之后我們用 webpack 打包時，就可以直接在終端輸入 webpack ，就相當于 webpack src/main.js dist/bundle.js ,雖然看起來簡潔，但是這不是我們最終的方式，我們最好的方式在下方有記錄

webpack.config.js是 webpack 的組態檔， webpack 在真正開始打包構建之前，會先讀取這個組態檔，從而基于給定的配置，對專案進行打包，

注意：由于 webpack 是基于 node.js 開發出來的打包工具，因此在它的組態檔中，支持使用 node.js 相關的語法和模塊進行webpack 的

3.2、區域安裝webpack

既然已經全域安裝了 webpack，為什么還要區域安裝呢？這是因為我們需要的專案可能是從網上下載下來的，專案中使用的webpack和我們本地的webpack可能版本不同，這就需要在區域安裝webpack了

目前，我們使用的webpack是全域的webpack，如果我們想使用區域來打包呢？

因為一個專案往往依賴特定的webpack版本，全域的版本可能很這個專案的webpack版本不一致，匯出打包出現問題，
所以通常一個專案，都有自己區域的webpack，

第一步，專案中需要安裝自己區域的webpack

這里我們讓區域安裝安裝 webpack3.6.0

npm install webpack@3.6.0 --save-dev

3.3、package.json中定義啟動

但是，每次執行都敲這么一長串有沒有覺得不方便呢？OK，我們可以在package.json的scripts中定義自己的執行腳本，

package.json中的scripts的腳本在執行時，會按照一定的順序尋找命令對應的位置，
首先，會尋找本地的 node_modules/.bin 路徑中對應的命令，
如果沒有找到，會去全域的環境變數中尋找

在 package.json 檔案下有 scripts ，是腳本的意思，我們只需要在下方配置腳本

在這里插入圖片描述

這樣配置完成之后，我們在終端輸入 npm run build 也就相當于執行 webpack ，也就相當于執行 webpack src/main.js dist/bundle.js

4、webpack中的loader

在實際開發程序中， webpack 默認只能打包處理以 .js 后綴名結尾的模塊，其他非 .js 后綴名結尾的模塊， webpack 默認處理不了，需要呼叫 loader 加載器才可以正常打包，否則會報錯

loader加載器的作用：協助 webpack 打包處理特定的檔案模塊，比如：

css-loader 可以打包處理 .css 相關的檔案
less-loader 可以打包處理 .less 相關的檔案
babel-loader 可以打包處理 webpack 無法處理的高級 JS 語法

4.1、css-loader

loader是webpack中一個非常核心的概念，

webpack用來做什么呢？

在我們之前的實體中，我們主要是用webpack來處理我們寫的js代碼，并且webpack會自動處理js之間相關的依賴，
但是，在開發中我們不僅僅有基本的js代碼處理，我們也需要加載css、圖片，也包括一些高級的將ES6轉成ES5代碼，將TypeScript轉成ES5代碼，將scss、less轉成css，將.jsx、.vue檔案轉成js檔案等等，
對于webpack本身的能力來說，對于這些轉化是不支持的，
那怎么辦呢？給webpack擴展對應的 loader 就可以啦，

loader使用程序：

步驟一：通過 npm 安裝需要使用的 loader
步驟二：在 webpack.config.js 中的 modules 關鍵字下進行配置

4.1.1、css檔案處理準備作業

專案開發程序中，我們必然需要添加很多的樣式，而樣式我們往往寫到一個單獨的檔案中，

在src目錄中，創建一個css檔案，其中創建一個normal.css檔案，
我們也可以重新組織檔案的目錄結構，將零散的js檔案放在一個js檔案夾中，
normal.css 中的代碼非常簡單，就是將body設定為red
在webpack中文網中有 loader的用法：https://www.webpackjs.com/

在這里插入圖片描述

css 檔案的打包需要用到 style-loader，css-loader

在這里插入圖片描述

先安裝 style-loader，再安裝 css-loader

在這里插入圖片描述

之后在 main.js 參考我們自己的 css 檔案，再打包即可

在這里插入圖片描述

總結步驟：

首先安裝 style-loader 和 css-loader

npm install --save-dev css-loader
npm install style-loader --save-dev

在 webpack.config.js 的 module-> rules 陣列中，添加loader規則如下

module: {			// 所有第三方檔案模塊的匹配規則
    rules: [		// 檔案后綴名的匹配規則
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

其中， test 表示匹配的檔案型別，use 表示對應要呼叫的 loader

注意：

use 陣列中指定的 loader 順序是固定的
多個 loader 的呼叫順序是：從后往前呼叫

4.2、less-loader

如果我們希望在專案中使用less、scss、stylus來寫樣式，webpack是否可以幫助我們處理呢？

我們這里以less為例，其他也是一樣的，

我們還是先創建一個less檔案，依然放在css檔案夾中

繼續在中文檔案里面查看 less-loader 的用法

在這里插入圖片描述

在 main.js 中進行參考即可
打包

4.3、圖片檔案處理

首先，我們在專案中加入兩張圖片：

一張較小的圖片test01.jpg(小于8kb)，一張較大的圖片test02.jpeg(大于8kb)
我們會針對這兩張圖片進行不同的處理
我們先考慮在css樣式中參考圖片的情況，所以更改 normal.css 中的樣式，就是使用背景圖片

4.3.1、url-loader

圖片處理

我們使用 url-loader 來處理，依然先安裝 url-loader，然后在 webpack.config.js 中進行配置

在這里插入圖片描述

再次打包，運行 index.html，就會發現我們的就會發現我們的背景圖片顯示出來，而仔細觀察，你會發現背景圖是通過base64顯示出來的，這也是limit屬性的作用，當圖片小于8kb時，對圖片進行base64編碼

當加載的圖片, 小于limit時, 會將圖片編譯成base64字串形式.
當加載的圖片, 大于limit時, 需要使用file-loader模塊進行加載.

4.3.2、file-loader

大于 limit 的圖片，會通過file-loader進行處理

在這里插入圖片描述

4.3.3、修改圖片名稱和路徑

我們發現webpack自動幫助我們生成一個非常長的名字，這是一個32位hash值，目的是防止名字重復，但是，真實開發中，我們可能對打包的圖片名字有一定的要求，比如，將所有的圖片放在一個檔案夾中，跟上圖片原來的名稱，同時也要防止重復，

所以，我們可以在options中添加上如下選項：

img：檔案要打包到的檔案夾
name：獲取圖片原來的名字，放在該位置
hash:8：為了防止圖片名稱沖突，依然使用hash，但是我們只保留8位
ext：使用圖片原來的擴展名

在這里插入圖片描述

另外，默認情況下，webpack 會將生成的路徑直接回傳給使用者，但是，我們整個程式是打包在 dist 檔案夾下的，所以需要在路徑下添加 dist/ （是在出口函式處使用publicPath 設定）

在這里插入圖片描述

4.4、babel-loader

webpack只能打包處理一部分高級的 JavaScript 語法，對于那些 webpack 無法處理的高級 js 語法，需要借助于 babelbabel-loader 進行打包處理，

如果希望將ES6的語法轉成ES5，那么就需要使用 babel-loader 進行打包處理

安裝 babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

配置 webpack.config.js 檔案

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        }
      }
    }
  ]
}

重新打包，查看bundle.js檔案，發現其中的內容變成了ES5的語法

5、webpack中的插件

plugin是插件的意思，通常是用于對某個現有的架構進行擴展，
webpack中的插件，就是對webpack現有功能的各種擴展，比如打包優化，檔案壓縮等等

loader 和 plugin 區別？

loader主要用于轉換某些型別的模塊，它是一個轉換器，
plugin是插件，它是對webpack本身的擴展，是一個擴展器，

plugin 使用步驟：

步驟一：通過npm安裝需要使用的plugins(某些webpack已經內置的插件不需要安裝)
步驟二：在webpack.config.js中的plugins中配置插件

5.1、添加著作權的plugin

該插件的名字叫做 BannerPlugin，屬于 webpack 自帶的插件，

在這里插入圖片描述

步驟如下：

在 webpack.config.js 中匯入 webpack

const webpack = require('webpack');

配置在 plugins 中

module.exports = {
	...
    plugins: [
		new webpack.BannerPlugin('最終著作權歸aaa所有')
    ]
}

5.2、打包html的plugin

目前，我們的index.html檔案是存放在專案的根目錄下的，我們知道，在真實發布專案時，發布的是dist檔案夾中的內容，但是dist檔案夾中如果沒有index.html檔案，那么打包的js等檔案也就沒有意義了，所以，我們需要將index.html檔案打包到dist檔案夾中，這個時候就可以使用html-webpack-plugin插件

html-webpack-plugin 插件可以為我們做這些事情：

自動生成一個index.html檔案(可以指定模板來生成)
將打包的js檔案，自動通過script標簽插入到body中

安裝

nom install html-webpack-plugin --save-dev

在 webpack.config.js 中匯入 HTML 插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

使用插件，修改webpack.config.js檔案中plugins部分的內容如下
- 這里的template表示根據什么模板來生成 index.html
- 另外，我們需要洗掉之前在output中添加的publicPath屬性，否則插入的script標簽中的src可能會有問題

// 1.匯入HTML插件,得到一個建構式
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 2.創建HTML插件的實體物件
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',	// 指定原檔案的存放路徑
    filename: './index.html',		// 指定生成的檔案的存放路徑
})

module.exports = {
	mode: 'development',
    plugins: [htmlPlugin],		// 通過 plugins 節點,使 htmlPlugin 插件生效
		
}

5.3、webpack-dev-server

webpack提供了一個可選的本地開發服務器，這個本地服務器基于node.js搭建，內部使用express框架，可以實作我們想要的讓瀏覽器自動重繪顯示我們修改后的結果，

類似于 node.js 階段用到的 nodemon 工具，每當修改了源代碼， webpack 會自動進行專案的打包和構建

它是一個單獨的模塊，在webpack中使用之前需要先安裝它

npm install --save-dev webpack-dev-server

修改 package.json -> scripts 中的 dev 命令

open引數表示直接打開瀏覽器，不加 --open 表示不自動打開服務器

"dev": "webpack-dev-server --open"

在這里插入圖片描述

之后我們就可以通過 npm run dev 來修改我們的代碼，而不需要每次修改完代碼都進行打包，修改測驗完成再通過 npm run build 打包

devserver 節點也是作為webpack中的一個選項，選項本身可以設定如下屬性，可以對插件進行更多的配置

module.exports = {
    ...
    ...
    devServer: {
        contentBase: './dist',	// 為哪一個檔案夾提供本地服務，默認是根檔案夾，我們這里要填寫./dist
        open: true,				// 自動打開瀏覽器
        host: '127.0.0.1',		// 實時打包所使用的主機地址
        port: '80',				// 實時打包所使用的埠號,默認是 8080
    }
}

在這里插入圖片描述

注意：凡是修改了 webpack.config.js 組態檔，或修改了 package.json 組態檔，必須重啟實時打包的服務器，否則最新的組態檔無法生效，

5.4、js壓縮的Plugin

我們使用一個第三方的插件 uglifyjs-webpack-plugin，并且版本號指定

下載

npm install uglifyjs-webpack-plugin --save-dev

修改 webpack.config.js 檔案，使用插件

module.exports = {
	...
    plugins: [
		new UglifyjsWebpackPlugin()
    ]
}

查看打包后的bunlde.js檔案，是已經被壓縮過了，

6、打包發布

專案開發完成之后，需要使用 webpack 對專案進行打包發布，主要原因有以下兩點：

開發環境下，打包生成的檔案存放于記憶體中，無法獲取到最終打包生成的檔案
開發環境下，打包生成的檔案不會進行代碼壓縮和性能優化

為了讓專案能夠在生產環境中高性能的運行，因此需要對專案進行打包發布，

6.1、配置webpack的打包發布

在 package.json 檔案的 scripts 節點下，新增 build 命令如下

{
    ...
    "script": {
        "dev": "webpack serve",		// 開發環境中,運行dev命令
        "build": "webpack --mode production"	// 專案發布時,運行 build 命令 
    }
}

-- model 是一個引數項，用來指定 webpack 的運行模式，production 代表生產環境，會對打包生成的檔案
進行代碼壓縮和性能優化 ，

注意：通過 -- model 指定的引數項，會覆寫 webpack.config.js 中的 model 選項

6.2、把JavaScript檔案統一生成到js目錄中

在 webpack.config.js 組態檔的 output 節點中，進行如下的配置

const path = require('path')

module.exports = {
    // 入口:可以是字串/陣列/物件，我們這里的入口只有一個，所以寫一個字串即可
    entry: path.join(__dirname,'./src/index.js')
    
    // 出口:通常是一個物件,里面至少包含兩個重要屬性,path 和 filename
    output :{
        // 注意: path通常是一個絕對路徑
        path: path.resolve(__dirname,'dist'),
        // 明確告訴 webpack 把生成的 bundle.js 檔案存放到 dist 目錄下的 js 子目錄中
        filename: 'js/bundle.js'
    }
}

6.3、把圖片檔案統一生成到 image 目錄中

修改 webpack.config.js 中的 url-loader 配置項，新增 outputPath 選項即可指定圖片檔案的輸出路徑

{
    test: /\.jpg|png|gif$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 22228,
            // 明確指定把打包生成的圖片檔案,存盤到 dist 目錄下的 image 檔案夾中    
            outputPath: 'image',
        }
    }
}

6.4、自動清理 dist 目錄下的舊檔案

為了在每次打包發布時自動清理掉 dist 目錄中的舊檔案，可以安裝并配置 clean-webpack-plugin 插件

安裝插件

npm install clean-webpack-plugin --save-dev

按需匯入插件，得到插件的建構式后，創建插件的實體物件

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

把創建的 cleanPlugin 插件實體物件掛載到 plugins 節點中

// 1.匯入清理插件插件,得到插件的建構式后，創建插件的實體物件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 2.創建HTML插件的實體物件
const cleanPlugin = new CleanWebpackPlugin()

// 3.把創建的 cleanPlugin 插件實體物件,掛載到 plugins 節點中,使插件生效
module.exports = {
	mode: 'development',
    plugins: [htmlPlugin,cleanPlugin],		// 掛載插件
		
}

7、Source Map

7.1、生產環境遇到的問題

前端專案在投入生產環境之前，都需要對JavaScript 源代碼進行壓碩訓淆，從而減小檔案的體積，提高檔案的加載效率，此時就不可避免的產生了另一個問題：

對壓碩訓淆之后的代碼除錯（debug）是一件極其困難的事情
變數被替換成沒有任何語意的名稱
空行和注釋被剔除

7.2、什么是SourceMap

Source Map就是一個資訊檔案，里面儲存著位置資訊
也就是說， Source Map 檔案中存盤著壓碩訓淆后的代碼所對應的轉換前的位置，
有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換后的代碼，能夠極大的方便后期的除錯，

7.2.1、webpack 開發環境下的 Source Map

在開發環境下，webpack 默認啟用了 Source Map 功能，當程式運行出錯時，可以直接在控制臺提示錯誤行的位置，并定位到具體的源代碼，

在這里插入圖片描述

7.2.2、默認Source Map的問題

開發環境下默認生成的 SourceMap ，記錄的是生成后的代碼的位置，會導致運行時報錯的行數與源代碼的行數不一致的問題，示意圖如下：

在這里插入圖片描述

7.2.3、解決默認Source Map的問題

開發環境下，推薦在 webpack.config.js 中添加如下的配置，即可保證運行時報錯的行數與源代碼的行數保持一致

module.exports = {
    mode: 'development',
    // eval-source-map 僅限在'開發模式'下使用,不建議在 '生產模式'下使用，
    // 此選項生產的 Source Map 能夠保證運行時報錯的行數與源代碼的行數保持一致
    devtool: 'eval-source-map',
}

7.3、webpack生產環境下的SourceMap

在生產環境下，如果省略了 devtool 選項，則最終生成的檔案中不包含 Source Map ，這能夠防止原始代碼通過Source Map 的形式暴露給別有所圖之人，

在這里插入圖片描述

7.3.1、只定位行數不暴露原始碼

在生產環境下，如果只想定位報錯的具體行數，且不想暴露原始碼，此時可以將 devtool 的值設定為nosources-source-map ，實際效果如圖所示：

在這里插入圖片描述

7.3.2、定位行數且暴露原始碼

在生產環境下，如果想在定位報錯行數的同時，展示具體報錯的原始碼，此時可以將 devtool 的值設定為 source-map，實際效果如圖所示：

在這里插入圖片描述

7.4、Source Map最佳實踐

開發環境下
- 建議把 devtool 的值設定為 eval-source-map
- 好處：可以精準定位到具體的錯誤行
生產環境下
- 建議關閉 Source Map 或將 devtool 的值設定為 nosources-source-map
- 好處：放置原始碼泄露，提高網站的安全性

總結：實際開發中不需要自己配置webpack

實際開發中會使命令列工具（俗稱 CLI）一鍵生成帶有 webpack 的專案
開箱即用，所有 webpack 配置項都是現成的
但是我們仍需要了解配置項的基本概念

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301059.html

標籤：其他

上一篇：匠心打造多tab自動吸頂下的多滾動容器（詳細）

下一篇：基于 Vue 開發一個多人聊天室（萬字長文） - 從 0 到 1 篇

Vue全家桶之webpack詳解(四)

🔥Vue🔥

1、認識webpack

1.1、打包

1.2、和grunt/gulp的對比

1.3、安裝webpack

1.3.1、安裝node.js

1.3.2、測驗

1.3.3、更改淘寶鏡像

1.3.4、全域安裝webpack

2、準備作業

2.1、js檔案的打包

2.2、使用打包后的檔案

2.3、示例

3、webpack配置

3.0、mode節點的可選值

3.1、入口和出口

3.2、區域安裝webpack

3.3、package.json中定義啟動

4、webpack中的loader

4.1、css-loader

4.1.1、css檔案處理準備作業

4.2、less-loader

4.3、圖片檔案處理

4.3.1、url-loader

4.3.2、file-loader

4.3.3、修改圖片名稱和路徑

4.4、babel-loader

5、webpack中的插件

5.1、添加著作權的plugin

5.2、打包html的plugin

5.3、webpack-dev-server

5.4、js壓縮的Plugin

6、打包發布

6.1、配置webpack的打包發布

6.2、把JavaScript檔案統一生成到js目錄中

6.3、把圖片檔案統一生成到 image 目錄中

6.4、自動清理 dist 目錄下的舊檔案

7、Source Map

7.1、生產環境遇到的問題

7.2、什么是SourceMap

7.2.1、webpack 開發環境下的 Source Map

7.2.2、默認Source Map的問題

7.2.3、解決默認Source Map的問題

7.3、webpack生產環境下的SourceMap

7.3.1、只定位行數不暴露原始碼

7.3.2、定位行數且暴露原始碼

7.4、Source Map最佳實踐