一、認(rèn)識(shí)webpack

• 什么是webpack？
  這個(gè)webpack還真不是一兩句話可以說清楚的。
• 我們先看看官方的解釋：
  At its core, webpack is a static module bundler for modern JavaScript applications.
• 從本質(zhì)上來講，webpack是一個(gè)現(xiàn)代的JavaScript應(yīng)用的靜態(tài)模塊打包工具。
  但是它是什么呢？用概念解釋概念，還是不清晰。
  我們從兩個(gè)點(diǎn)來解釋上面這句話：模塊 和 打包
  

前端模塊化：

• 在前面學(xué)習(xí)中，我已經(jīng)用了大量的篇幅解釋了為什么前端需要模塊化。
• 而且我也提到了目前使用前端模塊化的一些方案：AMD、CMD、CommonJS、ES6。
• 在ES6之前，我們要想進(jìn)行模塊化開發(fā)，就必須借助于其他的工具，讓我們可以進(jìn)行模塊化開發(fā)。
• 并且在通過模塊化開發(fā)完成了項(xiàng)目后，還需要處理模塊間的各種依賴，并且將其進(jìn)行整合打包。
• 而webpack其中一個(gè)核心就是讓我們可能進(jìn)行模塊化開發(fā)，并且會(huì)幫助我們處理模塊間的依賴關(guān)系。
• 而且不僅僅是JavaScript文件，我們的CSS、圖片、json文件等等在webpack中都可以被當(dāng)做模塊來使用（在后續(xù)我們會(huì)看到）。
  這就是webpack中模塊化的概念。

打包如何理解呢？

• 理解了webpack可以幫助我們進(jìn)行模塊化，并且處理模塊間的各種復(fù)雜關(guān)系后，打包的概念就非常好理解了。
• 就是將webpack中的各種資源模塊進(jìn)行打包合并成一個(gè)或多個(gè)包(Bundle)。
• 并且在打包的過程中，還可以對(duì)資源進(jìn)行處理，比如壓縮圖片，將scss轉(zhuǎn)成css，將ES6語法轉(zhuǎn)成ES5語法，將TypeScript轉(zhuǎn)成JavaScript等等操作。

但是打包的操作似乎grunt/gulp也可以幫助我們完成，它們有什么不同呢？
和grunt/gulp的對(duì)比：

grunt/gulp的核心是Task
我們可以配置一系列的task，并且定義task要處理的事務(wù)（例如ES6、ts轉(zhuǎn)化，圖片壓縮，scss轉(zhuǎn)成css）
之后讓grunt/gulp來依次執(zhí)行這些task，而且讓整個(gè)流程自動(dòng)化。 所以grunt/gulp也被稱為前端自動(dòng)化任務(wù)管理工具。

我們來看一個(gè)gulp的task
下面的task就是將src下面的所有js文件轉(zhuǎn)成ES5的語法。
并且最終輸出到dist文件夾中。

什么時(shí)候用grunt/gulp呢？

• 如果你的工程模塊依賴非常簡(jiǎn)單，甚至是沒有用到模塊化的概念。
• 只需要進(jìn)行簡(jiǎn)單的合并、壓縮，就使用grunt/gulp即可。
• 但是如果整個(gè)項(xiàng)目使用了模塊化管理，而且相互依賴非常強(qiáng)，我們就可以使用更加強(qiáng)大的webpack了。

所以，grunt/gulp和webpack有什么不同呢？

• grunt/gulp更加強(qiáng)調(diào)的是前端流程的自動(dòng)化，模塊化不是它的核心。
• webpack更加強(qiáng)調(diào)模塊化開發(fā)管理，而文件壓縮合并、預(yù)處理等功能，是他附帶的功能。

二、webpack的安裝

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

查看自己的node版本：

全局安裝webpack(這里我先指定版本號(hào)3.6.0，因?yàn)関ue cli2依賴該版本)

局部安裝webpack（后續(xù)才需要）
--save-dev是開發(fā)時(shí)依賴，項(xiàng)目打包后不需要繼續(xù)使用的。

為什么全局安裝后，還需要局部安裝呢？

• 在終端直接執(zhí)行webpack命令，使用的全局安裝的webpack
• 當(dāng)在package.json中定義了scripts時(shí)，其中包含了webpack命令，那么使用的是局部webpack

三、webpack的起步

3.1 準(zhǔn)備工作

我們創(chuàng)建如下文件和文件夾：

文件和文件夾解析：

dist文件夾：用于存放之后打包的文件

src文件夾：用于存放我們寫的源文件

main.js：項(xiàng)目的入口文件。具體內(nèi)容查看下面詳情。

mathUtils.js：定義了一些數(shù)學(xué)工具函數(shù)，可以在其他地方引用，并且使用。具體內(nèi)容查看下面的詳情。

index.html：瀏覽器打開展示的首頁html

package.json：通過npm init生成的，npm包管理的文件（暫時(shí)沒有用上，后面才會(huì)用上）

mathUtils.js文件中的代碼：

main.js文件中的代碼：

3.2 js文件的打包

現(xiàn)在的js文件中使用了模塊化的方式進(jìn)行開發(fā)，他們可以直接使用嗎？
不可以。
因?yàn)槿绻苯釉趇ndex.html引入這兩個(gè)js文件，瀏覽器并不識(shí)別其中的模塊化代碼。
另外，在真實(shí)項(xiàng)目中當(dāng)有許多這樣的js文件時(shí)，我們一個(gè)個(gè)引用非常麻煩，并且后期非常不方便對(duì)它們進(jìn)行管理。

我們應(yīng)該怎么做呢？

• 使用webpack工具，對(duì)多個(gè)js文件進(jìn)行打包。
• 我們知道，webpack就是一個(gè)模塊化的打包工具，所以它支持我們代碼中寫模塊化，可以對(duì)模塊化的代碼進(jìn)行處理。（如何處理的，待會(huì)兒在原理中，我會(huì)講解）
• 另外，如果在處理完所有模塊之間的關(guān)系后，將多個(gè)js打包到一個(gè)js文件中，引入時(shí)就變得非常方便了。

OK，如何打包呢？
使用webpack的指令即可

注意：如果webpack是4.0.x版本以上，使用webpack ./src/main.js -o ./dist/bundle.js --mode development

3.3 使用打包后的文件

打包后會(huì)在dist文件下，生成一個(gè)bundle.js文件

文件內(nèi)容有些復(fù)雜，這里暫時(shí)先不看，后續(xù)再進(jìn)行分析。
bundle.js文件，是webpack處理了項(xiàng)目直接文件依賴后生成的一個(gè)js文件，我們只需要將這個(gè)js文件在index.html中引入即可

四、webpack的配置

4.1 入口和出口

我們考慮一下，如果每次使用webpack的命令都需要寫上入口和出口作為參數(shù)，就非常麻煩，有沒有一種方法可以將這兩個(gè)參數(shù)寫到配置中，在運(yùn)行時(shí)，直接讀取呢？
當(dāng)然可以，就是創(chuàng)建一個(gè)webpack.config.js文件

4.2 局部安裝webpack

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

• 因?yàn)橐粋€(gè)項(xiàng)目往往依賴特定的webpack版本，全局的版本可能很這個(gè)項(xiàng)目的webpack版本不一致，導(dǎo)出打包出現(xiàn)問題。
• 所以通常一個(gè)項(xiàng)目，都有自己局部的webpack。

第一步，項(xiàng)目中需要安裝自己局部的webpack
這里我們讓局部安裝webpack3.6.0
Vue CLI3中已經(jīng)升級(jí)到webpack4，但是它將配置文件隱藏了起來，所以查看起來不是很方便。

第二步，通過.\node_modules\.bin\webpack啟動(dòng)webpack打包

4.3 package.json中定義啟動(dòng)

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

package.json中的scripts的腳本在執(zhí)行時(shí)，會(huì)按照一定的順序?qū)ふ颐顚?duì)應(yīng)的位置。

• 首先，會(huì)尋找本地的node_modules/.bin路徑中對(duì)應(yīng)的命令。
• 如果沒有找到，會(huì)去全局的環(huán)境變量中尋找。

如何執(zhí)行我們的build指令呢？

五、loader的使用

5.1 什么是loader？

loader是webpack中一個(gè)非常核心的概念。

webpack用來做什么呢？

• 在我們之前的實(shí)例中，我們主要是用webpack來處理我們寫的js代碼，并且webpack會(huì)自動(dòng)處理js之間相關(guān)的依賴。
• 但是，在開發(fā)中我們不僅僅有基本的js代碼處理，我們也需要加載css、圖片，也包括一些高級(jí)的將ES6轉(zhuǎn)成ES5代碼，將TypeScript轉(zhuǎn)成ES5代碼，將scss、less轉(zhuǎn)成css，將.jsx、.vue文件轉(zhuǎn)成js文件等等。
• 對(duì)于webpack本身的能力來說，對(duì)于這些轉(zhuǎn)化是不支持的。

那怎么辦呢？給webpack擴(kuò)展對(duì)應(yīng)的loader就可以啦。
loader使用過程：

步驟一：通過npm安裝需要使用的loader

步驟二：在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置

大部分loader我們都可以在webpack的官網(wǎng)中找到，并且學(xué)習(xí)對(duì)應(yīng)的用法。

5.2 css文件處理 - 準(zhǔn)備工作

項(xiàng)目開發(fā)過程中，我們必然需要添加很多的樣式，而樣式我們往往寫到一個(gè)單獨(dú)的文件中。
在src目錄中，創(chuàng)建一個(gè)css文件，其中創(chuàng)建一個(gè)normal.css文件。
我們也可以重新組織文件的目錄結(jié)構(gòu)，將零散的js文件放在一個(gè)js文件夾中。

normal.css中的代碼非常簡(jiǎn)單，就是將body設(shè)置為red:

但是，這個(gè)時(shí)候normal.css中的樣式會(huì)生效嗎？

• 當(dāng)然不會(huì)，因?yàn)槲覀儔焊蜎]有引用它。
• webpack也不可能找到它，因?yàn)槲覀冎挥幸粋€(gè)入口，webpack會(huì)從入口開始查找其他依賴的文件。

在入口文件中引用：

重新打包，會(huì)出現(xiàn)如下錯(cuò)誤：

這個(gè)錯(cuò)誤告訴我們：加載normal.css文件必須有對(duì)應(yīng)的loader。

5.3 css文件處理 – css-loader

在webpack的官方中，我們可以找到如下關(guān)于樣式的loader使用方法：

按照官方配置webpack.config.js文件
注意：配置中有一個(gè)style-loader，我們并不知道它是什么，所以可以暫時(shí)不進(jìn)行配置。

重新打包項(xiàng)目：
但是，運(yùn)行index.html，你會(huì)發(fā)現(xiàn)樣式并沒有生效。
原因是css-loader只負(fù)責(zé)加載css文件，但是并不負(fù)責(zé)將css具體樣式嵌入到文檔中。
這個(gè)時(shí)候，我們還需要一個(gè)style-loader幫助我們處理。

5.4 css文件處理 – style-loader

我們來安裝style-loader

注意：style-loader需要放在css-loader的前面。
疑惑：
不對(duì)吧？按照我們的邏輯，在處理css文件過程中，應(yīng)該是css-loader先加載css文件，再由style-loader來進(jìn)行進(jìn)一步的處理，為什么會(huì)將style-loader放在前面呢？

答案：
這次因?yàn)閣ebpack在讀取使用的loader的過程中，是按照從右向左的順序讀取的。

在瀏覽器中打開index.html頁面：

5.5 less文件處理 – 準(zhǔn)備工作

如果我們希望在項(xiàng)目中使用less、scss、stylus來寫樣式，webpack是否可以幫助我們處理呢？
我們這里以less為例，其他也是一樣的。
我們還是先創(chuàng)建一個(gè)less文件，依然放在css文件夾中

出現(xiàn)了報(bào)錯(cuò)信息，提示我們需要安裝less-loader

5.6 less文件處理 – less-loader

繼續(xù)在官方中查找，我們會(huì)找到less-loader相關(guān)的使用說明

首先，還是需要安裝對(duì)應(yīng)的loader
注意：我們這里還安裝了less，因?yàn)閣ebpack會(huì)使用less對(duì)less文件進(jìn)行編譯

其次，修改對(duì)應(yīng)的配置文件
添加一個(gè)rules選項(xiàng)，用于處理.less文件

執(zhí)行npm run build命令，啟動(dòng)webpack重新打包項(xiàng)目：

注意：這里如果運(yùn)行失敗了，檢查下less-loader的版本，版本過高可能就會(huì)失敗！

在main.js文件中加入一行代碼：

再次執(zhí)行npm run build命令，啟動(dòng)webpack重新打包項(xiàng)目：

在瀏覽器中打開index.html文件：

5.7 圖片文件處理 – 資源準(zhǔn)備階段

• 首先，我們?cè)陧?xiàng)目中加入兩張圖片：
  一張較小的圖片test01.jpg(小于8kb)，一張較大的圖片test02.jpeg(大于8kb)
  待會(huì)兒我們會(huì)針對(duì)這兩張圖片進(jìn)行不同的處理
• 我們先考慮在css樣式中引用圖片的情況，所以我更改了normal.css中的樣式：
  

如果我們現(xiàn)在直接打包，執(zhí)行npm run build命令，會(huì)出現(xiàn)如下報(bào)錯(cuò)信息：

5.8 圖片文件處理 – url-loader

訪問官方文檔：

圖片處理，我們使用url-loader來處理，依然先安裝url-loader

修改webpack.config.js配置文件：

再次執(zhí)行npm run build命令，啟動(dòng)webpack重新打包項(xiàng)目：

注意：
此處需要注意url-loader的版本，版本太高可能會(huì)出現(xiàn)雖然運(yùn)行沒有報(bào)錯(cuò)，但是index.html頁面中無法顯示圖片，版本號(hào)如下所示，修改完之后，執(zhí)行npm install重新安裝，再執(zhí)行npm run build命令重新打包

再次打包，運(yùn)行index.html，就會(huì)發(fā)現(xiàn)我們的背景圖片選出了出來。
而仔細(xì)觀察，你會(huì)發(fā)現(xiàn)背景圖是通過base64顯示出來的
OK，這也是limit屬性的作用，當(dāng)圖片小于29kb時(shí)，對(duì)圖片進(jìn)行base64編碼


那么問題來了，如果大于29kb呢？我們將background的圖片改成beijing.png
這次因?yàn)榇笥?9kb的圖片，會(huì)通過file-loader進(jìn)行處理，但是我們的項(xiàng)目中并沒有file-loader

5.9 圖片文件處理 – file-loader

執(zhí)行npm run builde出現(xiàn)如下報(bào)錯(cuò)提示信息：


所以，我們需要安裝file-loader，執(zhí)行npm install file-loader --save-dev命令，安裝file-loader：

執(zhí)行npm run build命令，就會(huì)發(fā)現(xiàn)dist文件夾下多了一個(gè)圖片文件：

用瀏覽器打開index.html文件發(fā)現(xiàn)，背景圖片仍然無法正常顯示：

• 但是，我們發(fā)現(xiàn)圖片并沒有顯示出來，這是因?yàn)閳D片使用的路徑不正確
• 默認(rèn)情況下，webpack會(huì)將生成的路徑直接返回給使用者
• 但是，我們整個(gè)程序是打包在dist文件夾下的，所以這里我們需要在路徑下再添加一個(gè)dist/

當(dāng)把background屬性的url中的路徑前面加上./dist/之后，發(fā)現(xiàn)背景圖片可以正常顯示了，說明背景圖片一開始之所以無法顯示，是路徑錯(cuò)了

解決方案如下：
在webpack.config.js文件中添加publicPath:

然后重新執(zhí)行npm run build命令，再次打開index.html頁面，背景圖片就能正常顯示了！

5.10 圖片文件處理 – 修改文件名稱

我們發(fā)現(xiàn)webpack自動(dòng)幫助我們生成一個(gè)非常長(zhǎng)的名字

• 這是一個(gè)32位hash值，目的是防止名字重復(fù)
• 但是，真實(shí)開發(fā)中，我們可能對(duì)打包的圖片名字有一定的要求
• 比如，將所有的圖片放在一個(gè)文件夾中，跟上圖片原來的名稱，同時(shí)也要防止重復(fù)

我們發(fā)現(xiàn)webpack自動(dòng)幫助我們生成一個(gè)非常長(zhǎng)的名字

• 這是一個(gè)32位hash值，目的是防止名字重復(fù)
• 但是，真實(shí)開發(fā)中，我們可能對(duì)打包的圖片名字有一定的要求
• 比如，將所有的圖片放在一個(gè)文件夾中，跟上圖片原來的名稱，同時(shí)也要防止重復(fù)

所以，我們可以在options中添加上如下選項(xiàng)：

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

5.11 ES6語法處理

如果你仔細(xì)閱讀webpack打包的js文件，發(fā)現(xiàn)寫的ES6語法并沒有轉(zhuǎn)成ES5，那么就意味著可能一些對(duì)ES6還不支持的瀏覽器沒有辦法很好的運(yùn)行我們的代碼。

• 在前面我們說過，如果希望將ES6的語法轉(zhuǎn)成ES5，那么就需要使用babel。
• 而在webpack中，我們直接使用babel對(duì)應(yīng)的loader就可以了。
  

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置webpack.config.js文件:

重新打包，查看bundle.js文件，發(fā)現(xiàn)其中的內(nèi)容變成了ES5的語法

完整的package.json：

{"name": "meetwebpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-preset-es2015": "^6.24.1","css-loader": "^2.0.2","file-loader": "^3.0.1","less": "^4.1.0","less-loader": "^4.1.0","style-loader": "^0.23.1","url-loader": "^1.1.2","webpack": "^3.6.0"} }

完整的webpack.config.js文件：

const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',publicPath: 'dist/'},module: {rules: [{test: /\.css$/i,// css-loader只負(fù)責(zé)將css文件進(jìn)行加載// style-loader負(fù)責(zé)將樣式添加到DOM中// 使用多個(gè)loader時(shí)，webpack時(shí)從右向左讀取use: ["style-loader", "css-loader"],},{test: /\.less$/i,use: [{loader: "style-loader"},{loader: "css-loader"},{loader: "less-loader"},]},{test: /\.(png|jpg|gif|jpeg)$/i,use: [{loader: 'url-loader',options: {// 當(dāng)加載的圖片，小于limit時(shí)，會(huì)將圖片編譯成base64字符串形式// 當(dāng)加載的圖片，大于limit時(shí)，需要使用file-loader模塊進(jìn)行加載limit: 28000,name: 'img/[name].[hash:8].[ext]'},},],},{test: /\.m?js$/,// exclude:排除// include:包含exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}}]} }

六、webpack中配置Vue

6.1 引入vue.js

后續(xù)項(xiàng)目中，我們會(huì)使用Vuejs進(jìn)行開發(fā)，而且會(huì)以特殊的文件來組織vue的組件。
所以，下面我們來學(xué)習(xí)一下如何在我們的webpack環(huán)境中集成Vuejs

現(xiàn)在，我們希望在項(xiàng)目中使用Vuejs，那么必然需要對(duì)其有依賴，所以需要先進(jìn)行安裝
注：因?yàn)槲覀兒罄m(xù)是在實(shí)際項(xiàng)目中也會(huì)使用vue的，所以并不是開發(fā)時(shí)依賴


那么，接下來就可以按照我們之前學(xué)習(xí)的方式來使用Vue了


修改完成后，重新打包，運(yùn)行程序：

• 打包過程沒有任何錯(cuò)誤(因?yàn)橹皇嵌啻虬艘粋€(gè)vue的js文件而已)
• 但是運(yùn)行程序，沒有出現(xiàn)想要的效果，而且瀏覽器中有報(bào)錯(cuò)

這個(gè)錯(cuò)誤說的是我們使用的是runtime-only版本的Vue，什么意思呢？
這里我只說解決方案：Vue不同版本構(gòu)建，后續(xù)我具體講解runtime-only和runtime-compiler的區(qū)別。

所以我們修改webpack的配置，添加如下內(nèi)容即可：

webpack.config.js文件：

const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',publicPath: 'dist/'},module: {rules: [{test: /\.css$/i,// css-loader只負(fù)責(zé)將css文件進(jìn)行加載// style-loader負(fù)責(zé)將樣式添加到DOM中// 使用多個(gè)loader時(shí)，webpack時(shí)從右向左讀取use: ["style-loader", "css-loader"],},{test: /\.less$/i,use: [{loader: "style-loader"},{loader: "css-loader"},{loader: "less-loader"},]},{test: /\.(png|jpg|gif|jpeg)$/i,use: [{loader: 'url-loader',options: {// 當(dāng)加載的圖片，小于limit時(shí)，會(huì)將圖片編譯成base64字符串形式// 當(dāng)加載的圖片，大于limit時(shí)，需要使用file-loader模塊進(jìn)行加載limit: 28000,name: 'img/[name].[hash:8].[ext]'},},],},{test: /\.m?js$/,// exclude:排除// include:包含exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}}]},resolve: {// alias：別名alias: {'vue$': 'vue/dist/vue.esm.js'}} }

正常運(yùn)行之后，我們來考慮另外一個(gè)問題：

• 如果我們希望將data中的數(shù)據(jù)顯示在界面中，就必須是修改index.html
• 如果我們后面自定義了組件，也必須修改index.html來使用組件
• 但是html模板在之后的開發(fā)中，我并不希望手動(dòng)的來頻繁修改，是否可以做到呢？

6.2 el和template區(qū)別

定義template屬性：

• 在前面的Vue實(shí)例中，我們定義了el屬性，用于和index.html中的#app進(jìn)行綁定，讓Vue實(shí)例之后可以管理它其中的內(nèi)容
• 這里，我們可以將div元素中的{{message}}內(nèi)容刪掉，只保留一個(gè)基本的id為div的元素
• 但是如果我依然希望在其中顯示{{message}}的內(nèi)容，應(yīng)該怎么處理呢？
  我們可以再定義一個(gè)template屬性，代碼如下：

重新打包，運(yùn)行程序，顯示一樣的結(jié)果和HTML代碼結(jié)構(gòu):

那么，el和template模板的關(guān)系是什么呢？

• 在我們之前的學(xué)習(xí)中，我們知道el用于指定Vue要管理的DOM，可以幫助解析其中的指令、事件監(jiān)聽等等。
• 而如果Vue實(shí)例中同時(shí)指定了template，那么template模板的內(nèi)容會(huì)替換掉掛載的對(duì)應(yīng)el的模板。

這樣做有什么好處呢？
這樣做之后我們就不需要在以后的開發(fā)中再次操作index.html，只需要在template中寫入對(duì)應(yīng)的標(biāo)簽即可

但是，書寫template模塊非常麻煩怎么辦呢？

• 沒有關(guān)系，稍后我們會(huì)將template模板中的內(nèi)容進(jìn)行抽離。
• 會(huì)分成三部分書寫：template、script、style，結(jié)構(gòu)變得非常清晰。

6.3 Vue組件化開發(fā)引入

在學(xué)習(xí)組件化開發(fā)的時(shí)候，我說過以后的Vue開發(fā)過程中，我們都會(huì)采用組件化開發(fā)的思想。
那么，在當(dāng)前項(xiàng)目中，如果我也想采用組件化的形式進(jìn)行開發(fā)，應(yīng)該怎么做呢？

查看下面的代碼：
當(dāng)然，我們也可以將下面的代碼抽取到一個(gè)js文件中，并且導(dǎo)出。

6.4 .vue文件封裝處理

但是一個(gè)組件以一個(gè)js對(duì)象的形式進(jìn)行組織和使用的時(shí)候是非常不方便的

• 一方面編寫template模塊非常的麻煩
• 另外一方面如果有樣式的話，我們寫在哪里比較合適呢？

現(xiàn)在，我們以一種全新的方式來組織一個(gè)vue的組件

但是，這個(gè)時(shí)候這個(gè)文件可以被正確的加載嗎？

• 必然不可以，這種特殊的文件以及特殊的格式，必須有人幫助我們處理。
• 誰來處理呢？vue-loader以及vue-template-compiler。
  
  參考vue官網(wǎng)進(jìn)行安裝配置
  
  
  

安裝vue-loader和vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

修改webpack.config.js的配置文件：

執(zhí)行 npm run build 命令，又出現(xiàn)了報(bào)錯(cuò)信息：

告訴我們要安裝一個(gè)插件，這是vue-router版本是15以上引起的
需要再額外添加如下配置:


執(zhí)行 npm run build命令，運(yùn)行成功：

七、plugin的使用

7.1 認(rèn)識(shí)plugin

plugin是什么？
plugin是插件的意思，通常是用于對(duì)某個(gè)現(xiàn)有的架構(gòu)進(jìn)行擴(kuò)展。
webpack中的插件，就是對(duì)webpack現(xiàn)有功能的各種擴(kuò)展，比如打包優(yōu)化，文件壓縮等等。

loader和plugin區(qū)別

• loader主要用于轉(zhuǎn)換某些類型的模塊，它是一個(gè)轉(zhuǎn)換器。
• plugin是插件，它是對(duì)webpack本身的擴(kuò)展，是一個(gè)擴(kuò)展器。

plugin的使用過程：

步驟一：通過npm安裝需要使用的plugins(某些webpack已經(jīng)內(nèi)置的插件不需要安裝)

步驟二：在webpack.config.js中的plugins中配置插件。

下面，我們就來看看可以通過哪些插件對(duì)現(xiàn)有的webpack打包過程進(jìn)行擴(kuò)容，讓我們的webpack變得更加好用。

7.2 BannerPlugin：為打包的文件添加版權(quán)聲明

我們先來使用一個(gè)最簡(jiǎn)單的插件，為打包的文件添加版權(quán)聲明
該插件名字叫BannerPlugin，屬于webpack自帶的插件。

• 按照下面的方式來修改webpack.config.js的文件：
  
  重新打包程序：查看bundle.js文件的頭部，看到如下信息
  

7.3 HtmlWebpackPlugin：打包html的plugin

目前，我們的index.html文件是存放在項(xiàng)目的根目錄下的。
我們知道，在真實(shí)發(fā)布項(xiàng)目時(shí)，發(fā)布的是dist文件夾中的內(nèi)容，但是dist文件夾中如果沒有index.html文件，那么打包的js等文件也就沒有意義了。

所以，我們需要將index.html文件打包到dist文件夾中，這個(gè)時(shí)候就可以使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以為我們做這些事情：

• 自動(dòng)生成一個(gè)index.html文件(可以指定模板來生成)
• 將打包的js文件，自動(dòng)通過script標(biāo)簽插入到body中

安裝HtmlWebpackPlugin插件

npm install html-webpack-plugin --save-dev

使用插件，修改webpack.config.js文件中plugins部分的內(nèi)容如下：

注意：
這里的template表示根據(jù)什么模板來生成index.html
另外，我們需要?jiǎng)h除之前在output中添加的publicPath屬性
否則插入的script標(biāo)簽中的src可能會(huì)有問題

7.4 uglifyjs-webpack-plugin：js壓縮的Plugin

在項(xiàng)目發(fā)布之前，我們必然需要對(duì)js等文件進(jìn)行壓縮處理 這里，我們就對(duì)打包的js文件進(jìn)行壓縮

我們使用一個(gè)第三方的插件uglifyjs-webpack-plugin，并且版本號(hào)指定1.1.1，和CLI2保持一致

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

修改webpack.config.js文件，使用插件：

查看打包后的bunlde.js文件，是已經(jīng)被壓縮過了。

八、搭建本地服務(wù)器

webpack提供了一個(gè)可選的本地開發(fā)服務(wù)器，這個(gè)本地服務(wù)器基于node.js搭建，內(nèi)部使用express框架，可以實(shí)現(xiàn)我們想要的讓瀏覽器自動(dòng)刷新顯示我們修改后的結(jié)果。

不過它是一個(gè)單獨(dú)的模塊，在webpack中使用之前需要先安裝它

npm install --save-dev webpack-dev-server@2.9.1

devserver也是作為webpack中的一個(gè)選項(xiàng)，選項(xiàng)本身可以設(shè)置如下屬性：

• contentBase：為哪一個(gè)文件夾提供本地服務(wù)，默認(rèn)是根文件夾，我們這里要填寫./dist
• port：端口號(hào)
• inline：頁面實(shí)時(shí)刷新
• historyApiFallback：在SPA頁面中，依賴HTML5的history模式

webpack.config.js文件配置修改如下：

執(zhí)行node_modules\.bin\webpack-dev-server命令，啟動(dòng)服務(wù)器

瀏覽器中輸入http://localhost:8080/打開index.html頁面：

或者在package.json文件中配置如下代碼：

執(zhí)行npm run dev命令，啟動(dòng)本地服務(wù)器：


我們可以再配置另外一個(gè)scripts：
--open參數(shù)表示直接打開瀏覽器

九、webpack配置的分離

原因：有些配置針對(duì)開發(fā)環(huán)境，有些配置針對(duì)生產(chǎn)環(huán)境，所以分開配置

執(zhí)行命令 npm install webpack-merge --save-dev，安裝webpack-merge插件

建立build文件夾，分別建立 base.config.js prod.config.js dev.config.js

在base.config.js里配置共公部分

const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const uglifyJsPlugin = require('uglifyjs-webpack-plugin') // const {VueLoaderPlugin} = require("vue-loader") const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, '../dist'),filename: 'bundle.js',// publicPath: 'dist/'},module: {rules: [{test: /\.css$/i,// css-loader只負(fù)責(zé)將css文件進(jìn)行加載// style-loader負(fù)責(zé)將樣式添加到DOM中// 使用多個(gè)loader時(shí)，webpack時(shí)從右向左讀取use: ["style-loader", "css-loader"],},{test: /\.less$/i,use: [{loader: "style-loader"},{loader: "css-loader"},{loader: "less-loader"},]},{test: /\.(png|jpg|gif|jpeg)$/i,use: [{loader: 'url-loader',options: {// 當(dāng)加載的圖片，小于limit時(shí)，會(huì)將圖片編譯成base64字符串形式// 當(dāng)加載的圖片，大于limit時(shí)，需要使用file-loader模塊進(jìn)行加載limit: 28000,name: 'img/[name].[hash:8].[ext]'},},],},{test: /\.m?js$/,// exclude:排除// include:包含exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}},{test: /\.vue$/,loader: 'vue-loader'},]},resolve: {// import導(dǎo)入時(shí)，可以省略的后綴名extensions: ['.js','.css','.vue'],// alias：別名alias: {'vue$': 'vue/dist/vue.esm.js'}},plugins: [// 請(qǐng)確保引入這個(gè)插件來施展魔法new VueLoaderPlugin(),new webpack.BannerPlugin('最終版權(quán)歸zep所有'),new HtmlWebpackPlugin({template: 'index.html'}),// new uglifyJsPlugin()],// devServer: {// contentBase: './dist',// // 是否實(shí)時(shí)監(jiān)聽// inline: true// } }

在prod.config.js里配置生產(chǎn)環(huán)境

const uglifyJsPlugin = require('uglifyjs-webpack-plugin') const webpackMerge = require('webpack-merge') const baseConfig = require('./base.config')module.exports = webpackMerge(baseConfig,{plugins: [new uglifyJsPlugin()]} )

在dev.config.js里配置開發(fā)環(huán)境

const webpackMerge = require('webpack-merge') const baseConfig = require('./base.config')module.exports = webpackMerge(baseConfig,{devServer: {contentBase: './dist',// 是否實(shí)時(shí)監(jiān)聽inline: true} })

在package.json里指定 scripts 里 build 和 dev 所需要找的配置環(huán)境路徑

package.json文件：

{"name": "meetwebpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config ./build/prod.config.js","dev": "webpack-dev-server --open --config ./build/dev.config.js"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-preset-es2015": "^6.24.1","css-loader": "^2.0.2","file-loader": "^3.0.1","html-webpack-plugin": "^3.2.0","less": "^4.1.0","less-loader": "^4.1.0","style-loader": "^0.23.1","uglifyjs-webpack-plugin": "^1.1.1","url-loader": "^1.1.2","vue-loader": "^15.7.0","vue-template-compiler": "^2.5.21","webpack": "^3.6.0","webpack-dev-server": "^2.9.1","webpack-merge": "^4.1.5"},"dependencies": {"vue": "^2.5.21"} }

執(zhí)行npm run build 命令，在瀏覽器中打開index.html，可以正常顯示：

總結(jié)

以上是生活随笔為你收集整理的六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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