六、Webpack詳解學習筆記——webpack的安裝、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地伺服器、webpack配置的分離

一、認識webpack

• 什麼是webpack？

  這個webpack還真不是一兩句話可以說清楚的。

• 我們先看看官方的解釋：

  At its core, webpack is a static module bundler for modern JavaScript applications.

• 從本質上來講，webpack是一個現代的JavaScript應用的靜态子產品打包工具。

  但是它是什麼呢？用概念解釋概念，還是不清晰。

  我們從兩個點來解釋上面這句話：子產品 和 打包

  

1. 前端子產品化：

• 在前面學習中，我已經用了大量的篇幅解釋了為什麼前端需要子產品化。
• 而且我也提到了目前使用前端子產品化的一些方案：AMD、CMD、CommonJS、ES6。
• 在ES6之前，我們要想進行子產品化開發，就必須借助于其他的工具，讓我們可以進行子產品化開發。
• 并且在通過子產品化開發完成了項目後，還需要處理子產品間的各種依賴，并且将其進行整合打包。
• 而webpack其中一個核心就是讓我們可能進行子產品化開發，并且會幫助我們處理子產品間的依賴關系。

• 而且不僅僅是JavaScript檔案，我們的CSS、圖檔、json檔案等等在webpack中都可以被當做子產品來使用（在後續我們會看到）。

  這就是webpack中子產品化的概念。

1. 打包如何了解呢？

• 了解了webpack可以幫助我們進行子產品化，并且處理子產品間的各種複雜關系後，打包的概念就非常好了解了。
• 就是将webpack中的各種資源子產品進行打包合并成一個或多個包(Bundle)。
• 并且在打包的過程中，還可以對資源進行處理，比如壓縮圖檔，将scss轉成css，将ES6文法轉成ES5文法，将TypeScript轉成JavaScript等等操作。

但是打包的操作似乎grunt/gulp也可以幫助我們完成，它們有什麼不同呢？

和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了。

是以，grunt/gulp和webpack有什麼不同呢？

• grunt/gulp更加強調的是前端流程的自動化，子產品化不是它的核心。
• webpack更加強調子產品化開發管理，而檔案壓縮合并、預處理等功能，是他附帶的功能。

二、webpack的安裝

1. 安裝webpack首先需要安裝Node.js，Node.js自帶了軟體包管理工具npm
2. 檢視自己的node版本：

   

3. 全局安裝webpack(這裡我先指定版本号3.6.0，因為vue cli2依賴該版本)

   

4. 局部安裝webpack（後續才需要）

   --save-dev

   是開發時依賴，項目打包後不需要繼續使用的。

   

為什麼全局安裝後，還需要局部安裝呢？

• 在終端直接執行webpack指令，使用的全局安裝的webpack
• 當在package.json中定義了scripts時，其中包含了webpack指令，那麼使用的是局部webpack

三、webpack的起步

3.1 準備工作

我們建立如下檔案和檔案夾：

檔案和檔案夾解析：

1. dist檔案夾：用于存放之後打包的檔案
2. src檔案夾：用于存放我們寫的源檔案
3. main.js：項目的入口檔案。具體内容檢視下面詳情。
4. mathUtils.js：定義了一些數學工具函數，可以在其他地方引用，并且使用。具體内容檢視下面的詳情。
5. index.html：浏覽器打開展示的首頁html
6. package.json：通過npm init生成的，npm包管理的檔案（暫時沒有用上，後面才會用上）

mathUtils.js檔案中的代碼：

main.js檔案中的代碼：

3.2 js檔案的打包

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

不可以。

因為如果直接在index.html引入這兩個js檔案，浏覽器并不識别其中的子產品化代碼。

另外，在真實項目中當有許多這樣的js檔案時，我們一個個引用非常麻煩，并且後期非常不友善對它們進行管理。

我們應該怎麼做呢？

• 使用webpack工具，對多個js檔案進行打包。
• 我們知道，webpack就是一個子產品化的打包工具，是以它支援我們代碼中寫子產品化，可以對子產品化的代碼進行處理。（如何處理的，待會兒在原理中，我會講解）
• 另外，如果在處理完所有子產品之間的關系後，将多個js打包到一個js檔案中，引入時就變得非常友善了。

OK，如何打包呢？

使用webpack的指令即可

注意：如果webpack是4.0.x版本以上，使用

webpack ./src/main.js -o ./dist/bundle.js --mode development

3.3 使用打包後的檔案

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

檔案内容有些複雜，這裡暫時先不看，後續再進行分析。

bundle.js檔案，是webpack處理了項目直接檔案依賴後生成的一個js檔案，我們隻需要将這個js檔案在index.html中引入即可

四、webpack的配置

4.1 入口和出口

我們考慮一下，如果每次使用webpack的指令都需要寫上入口和出口作為參數，就非常麻煩，有沒有一種方法可以将這兩個參數寫到配置中，在運作時，直接讀取呢？

當然可以，就是建立一個webpack.config.js檔案

4.2 局部安裝webpack

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

• 因為一個項目往往依賴特定的webpack版本，全局的版本可能很這個項目的webpack版本不一緻，導出打包出現問題。
• 是以通常一個項目，都有自己局部的webpack。

1. 第一步，項目中需要安裝自己局部的webpack

   這裡我們讓局部安裝webpack3.6.0

   Vue CLI3中已經更新到webpack4，但是它将配置檔案隐藏了起來，是以檢視起來不是很友善。

   

   第二步，通過

   .\node_modules\.bin\webpack

   啟動webpack打包

   

4.3 package.json中定義啟動

但是，每次執行都敲這麼一長串有沒有覺得不友善呢？

OK，我們可以在package.json的scripts中定義自己的執行腳本。

package.json中的scripts的腳本在執行時，會按照一定的順序尋找指令對應的位置。

• 首先，會尋找本地的node_modules/.bin路徑中對應的指令。
• 如果沒有找到，會去全局的環境變量中尋找。

如何執行我們的build指令呢？

五、loader的使用

5.1 什麼是loader？

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

webpack用來做什麼呢？

• 在我們之前的執行個體中，我們主要是用webpack來處理我們寫的js代碼，并且webpack會自動處理js之間相關的依賴。
• 但是，在開發中我們不僅僅有基本的js代碼處理，我們也需要加載css、圖檔，也包括一些進階的将ES6轉成ES5代碼，将TypeScript轉成ES5代碼，将scss、less轉成css，将.jsx、.vue檔案轉成js檔案等等。
• 對于webpack本身的能力來說，對于這些轉化是不支援的。

那怎麼辦呢？給webpack擴充對應的loader就可以啦。

loader使用過程：

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

大部分loader我們都可以在webpack的官網中找到，并且學習對應的用法。

5.2 css檔案處理 - 準備工作

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

在src目錄中，建立一個css檔案，其中建立一個normal.css檔案。

我們也可以重新組織檔案的目錄結構，将零散的js檔案放在一個js檔案夾中。

normal.css中的代碼非常簡單，就是将body設定為red:

但是，這個時候normal.css中的樣式會生效嗎？

• 當然不會，因為我們壓根就沒有引用它。
• webpack也不可能找到它，因為我們隻有一個入口，webpack會從入口開始查找其他依賴的檔案。

在入口檔案中引用：

重新打包，會出現如下錯誤：

這個錯誤告訴我們：加載normal.css檔案必須有對應的loader。

5.3 css檔案處理 – css-loader

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

按照官方配置webpack.config.js檔案

注意：配置中有一個style-loader，我們并不知道它是什麼，是以可以暫時不進行配置。

重新打包項目：

但是，運作index.html，你會發現樣式并沒有生效。

原因是css-loader隻負責加載css檔案，但是并不負責将css具體樣式嵌入到文檔中。

這個時候，我們還需要一個

style-loader

幫助我們處理。

5.4 css檔案處理 – style-loader

我們來安裝style-loader

注意：style-loader需要放在css-loader的前面。

疑惑：

不對吧？按照我們的邏輯，在處理css檔案過程中，應該是css-loader先加載css檔案，再由style-loader來進行進一步的處理，為什麼會将style-loader放在前面呢？

答案：

這次因為webpack在讀取使用的loader的過程中，是按照從右向左的順序讀取的。

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

5.5 less檔案處理 – 準備工作

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

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

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

出現了報錯資訊，提示我們需要安裝less-loader

5.6 less檔案處理 – less-loader

繼續在官方中查找，我們會找到less-loader相關的使用說明

首先，還是需要安裝對應的loader

注意：我們這裡還安裝了less，因為webpack會使用less對less檔案進行編譯

其次，修改對應的配置檔案

添加一個rules選項，用于處理.less檔案

執行npm run build指令，啟動webpack重新打包項目：

注意：這裡如果運作失敗了，檢查下less-loader的版本，版本過高可能就會失敗！

在main.js檔案中加入一行代碼：

再次執行npm run build指令，啟動webpack重新打包項目：

在浏覽器中打開index.html檔案：

5.7 圖檔檔案處理 – 資源準備階段

• 首先，我們在項目中加入兩張圖檔：

  一張較小的圖檔test01.jpg(小于8kb)，一張較大的圖檔test02.jpeg(大于8kb)

  待會兒我們會針對這兩張圖檔進行不同的處理

• 我們先考慮在css樣式中引用圖檔的情況，是以我更改了normal.css中的樣式：

  

如果我們現在直接打包，執行npm run build指令，會出現如下報錯資訊：

5.8 圖檔檔案處理 – url-loader

通路官方文檔：

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

修改webpack.config.js配置檔案：

再次執行npm run build指令，啟動webpack重新打包項目：

注意：

此處需要注意url-loader的版本，版本太高可能會出現雖然運作沒有報錯，但是index.html頁面中無法顯示圖檔，版本号如下所示，修改完之後，執行npm install重新安裝，再執行npm run build指令重新打包

再次打包，運作index.html，就會發現我們的背景圖檔選出了出來。

而仔細觀察，你會發現背景圖是通過base64顯示出來的

OK，這也是limit屬性的作用，當圖檔小于29kb時，對圖檔進行base64編碼

那麼問題來了，如果大于29kb呢？我們将background的圖檔改成beijing.png

這次因為大于29kb的圖檔，會通過file-loader進行處理，但是我們的項目中并沒有file-loader

5.9 圖檔檔案處理 – file-loader

執行npm run builde出現如下報錯提示資訊：

是以，我們需要安裝file-loader，執行

npm install file-loader --save-dev

指令，安裝file-loader：

執行npm run build指令，就會發現dist檔案夾下多了一個圖檔檔案：

用浏覽器打開index.html檔案發現，背景圖檔仍然無法正常顯示：

• 但是，我們發現圖檔并沒有顯示出來，這是因為圖檔使用的路徑不正确
• 預設情況下，webpack會将生成的路徑直接傳回給使用者
• 但是，我們整個程式是打包在dist檔案夾下的，是以這裡我們需要在路徑下再添加一個dist/

當把background屬性的url中的路徑前面加上./dist/之後，發現背景圖檔可以正常顯示了，說明背景圖檔一開始之是以無法顯示，是路徑錯了

解決方案如下：

在webpack.config.js檔案中添加publicPath:

然後重新執行npm run build指令，再次打開index.html頁面，背景圖檔就能正常顯示了！

5.10 圖檔檔案處理 – 修改檔案名稱

我們發現webpack自動幫助我們生成一個非常長的名字

• 這是一個32位hash值，目的是防止名字重複
• 但是，真實開發中，我們可能對打包的圖檔名字有一定的要求
• 比如，将所有的圖檔放在一個檔案夾中，跟上圖檔原來的名稱，同時也要防止重複

我們發現webpack自動幫助我們生成一個非常長的名字

• 這是一個32位hash值，目的是防止名字重複
• 但是，真實開發中，我們可能對打包的圖檔名字有一定的要求
• 比如，将所有的圖檔放在一個檔案夾中，跟上圖檔原來的名稱，同時也要防止重複

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

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

5.11 ES6文法處理

如果你仔細閱讀webpack打包的js檔案，發現寫的ES6文法并沒有轉成ES5，那麼就意味着可能一些對ES6還不支援的浏覽器沒有辦法很好的運作我們的代碼。

• 在前面我們說過，如果希望将ES6的文法轉成ES5，那麼就需要使用babel。
• 而在webpack中，我們直接使用babel對應的loader就可以了。

  

npm install --save-dev [email protected] babel-core babel-preset-es2015
           

配置webpack.config.js檔案:

重新打包，檢視bundle.js檔案，發現其中的内容變成了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隻負責将css檔案進行加載
                // style-loader負責将樣式添加到DOM中
                // 使用多個loader時，webpack時從右向左讀取
                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: {
                            // 當加載的圖檔，小于limit時，會将圖檔編譯成base64字元串形式
                            // 當加載的圖檔，大于limit時，需要使用file-loader子產品進行加載
                            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

後續項目中，我們會使用Vuejs進行開發，而且會以特殊的檔案來組織vue的元件。

是以，下面我們來學習一下如何在我們的webpack環境中內建Vuejs

現在，我們希望在項目中使用Vuejs，那麼必然需要對其有依賴，是以需要先進行安裝

注：因為我們後續是在實際項目中也會使用vue的，是以并不是開發時依賴

那麼，接下來就可以按照我們之前學習的方式來使用Vue了

修改完成後，重新打包，運作程式：

• 打包過程沒有任何錯誤(因為隻是多打包了一個vue的js檔案而已)
• 但是運作程式，沒有出現想要的效果，而且浏覽器中有報錯

這個錯誤說的是我們使用的是runtime-only版本的Vue，什麼意思呢？

這裡我隻說解決方案：Vue不同版本建構，後續我具體講解runtime-only和runtime-compiler的差別。

是以我們修改webpack的配置，添加如下内容即可：

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隻負責将css檔案進行加載
                // style-loader負責将樣式添加到DOM中
                // 使用多個loader時，webpack時從右向左讀取
                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: {
                            // 當加載的圖檔，小于limit時，會将圖檔編譯成base64字元串形式
                            // 當加載的圖檔，大于limit時，需要使用file-loader子產品進行加載
                            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'
        }
    }
}

           

正常運作之後，我們來考慮另外一個問題：

• 如果我們希望将data中的資料顯示在界面中，就必須是修改index.html
• 如果我們後面自定義了元件，也必須修改index.html來使用元件
• 但是html模闆在之後的開發中，我并不希望手動的來頻繁修改，是否可以做到呢？

6.2 el和template差別

定義template屬性：

• 在前面的Vue執行個體中，我們定義了el屬性，用于和index.html中的#app進行綁定，讓Vue執行個體之後可以管理它其中的内容
• 這裡，我們可以将div元素中的{{message}}内容删掉，隻保留一個基本的id為div的元素

• 但是如果我依然希望在其中顯示{{message}}的内容，應該怎麼處理呢？

  我們可以再定義一個template屬性，代碼如下：

重新打包，運作程式，顯示一樣的結果和HTML代碼結構:

那麼，el和template模闆的關系是什麼呢？

• 在我們之前的學習中，我們知道el用于指定Vue要管理的DOM，可以幫助解析其中的指令、事件監聽等等。
• 而如果Vue執行個體中同時指定了template，那麼template模闆的内容會替換掉挂載的對應el的模闆。

這樣做有什麼好處呢？

這樣做之後我們就不需要在以後的開發中再次操作index.html，隻需要在template中寫入對應的标簽即可

但是，書寫template子產品非常麻煩怎麼辦呢？

• 沒有關系，稍後我們會将template模闆中的内容進行抽離。
• 會分成三部分書寫：template、script、style，結構變得非常清晰。

6.3 Vue元件化開發引入

在學習元件化開發的時候，我說過以後的Vue開發過程中，我們都會采用元件化開發的思想。

那麼，在目前項目中，如果我也想采用元件化的形式進行開發，應該怎麼做呢？

檢視下面的代碼：

當然，我們也可以将下面的代碼抽取到一個js檔案中，并且導出。

6.4 .vue檔案封裝處理

但是一個元件以一個js對象的形式進行組織和使用的時候是非常不友善的

• 一方面編寫template子產品非常的麻煩
• 另外一方面如果有樣式的話，我們寫在哪裡比較合适呢？

現在，我們以一種全新的方式來組織一個vue的元件

但是，這個時候這個檔案可以被正确的加載嗎？

• 必然不可以，這種特殊的檔案以及特殊的格式，必須有人幫助我們處理。
• 誰來處理呢？vue-loader以及vue-template-compiler。

  

  參考vue官網進行安裝配置

  

  

  

安裝vue-loader和vue-template-compiler

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

修改webpack.config.js的配置檔案：

執行 npm run build 指令，又出現了報錯資訊：

告訴我們要安裝一個插件，這是vue-router版本是15以上引起的

需要再額外添加如下配置:

執行 npm run build指令，運作成功：

七、plugin的使用

7.1 認識plugin

plugin是什麼？

plugin是插件的意思，通常是用于對某個現有的架構進行擴充。

webpack中的插件，就是對webpack現有功能的各種擴充，比如打包優化，檔案壓縮等等。

loader和plugin差別

• loader主要用于轉換某些類型的子產品，它是一個轉換器。
• plugin是插件，它是對webpack本身的擴充，是一個擴充器。

plugin的使用過程：

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

下面，我們就來看看可以通過哪些插件對現有的webpack打包過程進行擴容，讓我們的webpack變得更加好用。

7.2 BannerPlugin：為打包的檔案添加版權聲明

我們先來使用一個最簡單的插件，為打包的檔案添加版權聲明

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

• 按照下面的方式來修改webpack.config.js的檔案：

  

  重新打包程式：檢視bundle.js檔案的頭部，看到如下資訊

  

7.3 HtmlWebpackPlugin：打包html的plugin

目前，我們的index.html檔案是存放在項目的根目錄下的。

我們知道，在真實釋出項目時，釋出的是dist檔案夾中的内容，但是dist檔案夾中如果沒有index.html檔案，那麼打包的js等檔案也就沒有意義了。

是以，我們需要将index.html檔案打包到dist檔案夾中，這個時候就可以使用HtmlWebpackPlugin插件

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

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

安裝HtmlWebpackPlugin插件

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

使用插件，修改webpack.config.js檔案中plugins部分的内容如下：

注意：

這裡的template表示根據什麼模闆來生成index.html

另外，我們需要删除之前在output中添加的publicPath屬性

否則插入的script标簽中的src可能會有問題

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

在項目釋出之前，我們必然需要對js等檔案進行壓縮處理 這裡，我們就對打包的js檔案進行壓縮

我們使用一個第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一緻

npm install [email protected] --save-dev
           

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

檢視打包後的bunlde.js檔案，是已經被壓縮過了。

八、搭建本地伺服器

webpack提供了一個可選的本地開發伺服器，這個本地伺服器基于node.js搭建，内部使用express架構，可以實作我們想要的讓浏覽器自動重新整理顯示我們修改後的結果。

不過它是一個單獨的子產品，在webpack中使用之前需要先安裝它

devserver也是作為webpack中的一個選項，選項本身可以設定如下屬性：

• contentBase：為哪一個檔案夾提供本地服務，預設是根檔案夾，我們這裡要填寫./dist
• port：端口号
• inline：頁面實時重新整理
• historyApiFallback：在SPA頁面中，依賴HTML5的history模式

webpack.config.js檔案配置修改如下：

執行

node_modules\.bin\webpack-dev-server

指令，啟動伺服器

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

或者在package.json檔案中配置如下代碼：

執行npm run dev指令，啟動本地伺服器：

我們可以再配置另外一個scripts：

--open

參數表示直接打開浏覽器

九、webpack配置的分離

原因：有些配置針對開發環境，有些配置針對生産環境，是以分開配置

1. 執行指令 npm install webpack-merge --save-dev，安裝webpack-merge插件
2. 建立build檔案夾，分别建立 base.config.js prod.config.js dev.config.js

   

3. 在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隻負責将css檔案進行加載
                // style-loader負責将樣式添加到DOM中
                // 使用多個loader時，webpack時從右向左讀取
                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: {
                            // 當加載的圖檔，小于limit時，會将圖檔編譯成base64字元串形式
                            // 當加載的圖檔，大于limit時，需要使用file-loader子產品進行加載
                            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導入時，可以省略的字尾名
        extensions: ['.js','.css','.vue'],
        // alias：别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        // 請確定引入這個插件來施展魔法
        new VueLoaderPlugin(),
        new webpack.BannerPlugin('最終版權歸zep所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        // new uglifyJsPlugin()
    ],
    // devServer: {
    //     contentBase: './dist',
    //     // 是否實時監聽
    //     inline: true
    // }
}

           

1. 在prod.config.js裡配置生産環境

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig,{
        plugins: [
            new uglifyJsPlugin()
        ]
    }
)

           

1. 在dev.config.js裡配置開發環境

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig,{
    devServer: {
        contentBase: './dist',
        // 是否實時監聽
        inline: true
    }
})


           

1. 在package.json裡指定 scripts 裡 build 和 dev 所需要找的配置環境路徑

   

   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"
  }
}

           

1. 執行npm run build 指令，在浏覽器中打開index.html，可以正常顯示：