Vue 2.x + Webpack 4.x的那些事---萌新必備

你們好，本人名叫蘇日儷格，如今不少的項目都使用了webpack，如今最火的也就是vue和webpack結合來完善一個項目，因爲介入了一個有幾年歷史的產品，第一步不得不看看webpack的配置項，看看項目中的哪些部分被模塊化了，由於想要更多的理解webpack，查找了一些資料看了不少教程和API，測試了一個沒有使用vue腳手架的項目（ps:強烈建議新手務必遠離vue-cli，這東西是給有不少年開發經驗的老手來提升開發效率的，並不適合學習），下面我會把我對webpack的理解跟你們分享一下，本文純屬我的理解，有哪裏不對的地方請在評論區指出，你們一塊兒學習共同進步。

聽到webpack這個詞，就會有不少人也包括我都會想到gulp，認爲兩者都是自動化構建工具；其實不是這樣的，在這裏我先介紹兩者的異同：

• gulp：是一種自動化構建工具，可以提高咱們的開發效率，也能提高瀏覽器運行速度，譬如它能壓縮js/css等文件的代碼，還能編譯less/sass，能完成頁面的自動刷新等功能
• webpack：是一種模塊化管理方案/模塊打包工具，在他的眼裏就是萬物皆模塊，能夠用loader(加載器/轉換器)把任何一個文件資源打包成瀏覽器認識的JavaScript模塊，還能夠將按需加載的模塊進行異步加載

webpack特色

• Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴做爲分割點，造成一個新的塊。在優化了依賴樹後，每個異步區塊都做爲一個文件被打包。
• Webpack 自己只能處理原生的 JavaScript 模塊，可是 loader 轉換器能夠將各類類型的資源轉換成 JavaScript 模塊。這樣，任何資源均可以成爲 Webpack 能夠處理的模塊。
• Webpack 有一個智能解析器，幾乎能夠處理任何第三方庫，不管它們的模塊形式是 CommonJS、 AMD 仍是普通的 JS 文件。甚至在加載依賴的時候，容許使用動態表達式 require(「./templates/」 + name + 「.jade」)。
• Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基於這個插件系統運行的，還能夠開發和使用開源的 Webpack 插件，來知足各式各樣的需求。
• Webpack 使用異步 I/O 和多級緩存提升運行效率，這使得 Webpack 可以以使人難以置信的速度快速增量編譯。

在這裏不得不說一下：
webpack、gulp和grunt都是在nodeJs的環境下運行的，而在中大型項目或產品中，nodeJs通常用作中間層，作數據處理和轉發，而後再由底層語言進行底層開發，好比咱們公司的產品就是這種架構，C++做爲底層系統的開發；

看了上面的內容，咱們雖然知道了它在項目中用到的好處，但是咱們沒有見過，沒有真憑實據，能夠參考一下這個項目的demo(https://segmentfault.com/a/1190000012848772)，一步一步讓你的項目愈來愈快；那麼webpack具體怎麼用的呢？下面就來逐步介紹一下，爲了你們能學到，我這裏新建一個項目作示範：

1、安裝vue和webpack

1. 首先webpack是在node環境下運行的，電腦環境中須要有node和npm，而且node版本必須是v8.5以上的，不然不支持webpack 4。在本地建立一個項目文件夾（ps:文件名不能包含大寫字母），輸入dos命令npm init來初始化工程，一路回車下來會有一個package.json配置文件生成
2. 先安裝上生產環境的vue，其餘的開發環境的依賴包等會單獨安裝，不理解他們的區別的好好看看--save-dev和--save的區別，development很明顯就是咱們開發所須要的依賴包，而打包好上線的話是不須要這些包的，一來各類包加起來太大，二來它只是咱們開發提升效率的工具而已；
   先輸入npm i vue安裝上vue
3. 接着輸入npm i webpack vue-loader -D安裝webpack和vue-loader
   vue-loader就是咱們webpack須要讀取vue文件並加載成它所認識的js，以後細心的人就會發現package.json裏多了一個devDependencies對象，這就是咱們要的開發環境的依賴包
4. 再安裝讀取一些靜態資源好比：img、style、css的loader和vue-template-compiler（用來編譯vue模板），url-loader封裝了file-loader，將咱們要求的格式的圖片轉換成計算機的base64編碼：
   npm i style-loader css-loader url-loader file-loader vue-template-compiler -D
   還用webpack得安裝上webpack-cli：
   npm i webpack-cli -D

以上四步安裝完是這個效果：

2、配置webpack並打包項目

1. 在根目錄下建立一個src文件夾，在src下建立一個入口文件index.js和一個vue入口app.vue，全部的模塊化操做都是在webpack.config.js下完成的，將該文件放在根目錄，由於我沒用vue-cli，因此全部的文件須要手動引入，再引入咱們的一些css和img的靜態資源，把項目的總體結構按照腳手架的結構進行搭建，vue-cli模板不能直接嵌套進項目中，必須理解腳手架，手動的去構建vue項目

app.vue文件:

<template>
    <div id="app"></div>
</template>

<script type="text/javascript">
export default {

}
</script>

<style>
</style>

index.js文件:

import Vue from 'vue';
import App from './app.vue';

import './assets/style/test.css';

var vm = new Vue({
    el: '#app',
    render: (h) => h(App)  // 經過建立DOM元素返回參數h將App掛載，h即爲hyperscript，用來實現虛擬DOM的
});

webpack.config.js文件：

const Path = require('path'); // 從node上導入path
const VueLoaderPlugin = require('vue-loader/lib/plugin');  // webpack 4版本以後加的，以前的版本不須要這個

let config = {
    entry: Path.resolve(__dirname, './src/index.js'), // 以join拼接path的形式配置絕對路徑,相對路徑打包後找不到會報錯
    output: {
        filename: 'vendor.build.js',
        path: Path.join(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }, {
            test: /\.(png|jpg|jpeg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 1024, // 判斷圖片的大小   若是小於1024就會轉換成base64
                    name: '[name].[ext]' // 輸出圖片的名字  ext是擴展名
                }
            }
        }]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

module.exports = config;

上面配置好了以後還差最後一步，就是用webpack來執行配置跑項目，在scripts裏面加上build：

"build": "webpack --config webpack.config.js"

1. 執行npm run build來打包項目到dist下面的vendor.build.js：

這個時候會看到咱們的項目中多了個dist，就是咱們打包好的項目，這一步就省去了咱們不少的http請求，達到更優化的效果。

在打包這一過程當中，若是出現了打包失敗，檢查完問題後再次打包，若是顯示的是打包失敗，那麼請刪了以前打的包，從新build就會好了

3、運行項目

1. 如今項目已經打包好了，接下來開始運行咱們的項目，先創建一個屬於咱們的開發模式，這裏須要使用webpack-dev-server來啓動咱們的webpack.config.js，進而運行咱們的項目。使用它的東西第一步就是要安裝npm i webpack-dev-server，再往scripts裏面加上這個"dev": "webpack-dev-server --config webpack.config.js"：

咱們會看到有兩個webpack.config.js，可是咱們如今安裝的是咱們開發環境須要用到的，接下來增長一些開發模式須要用到的webpack的配置，這些配置我會逐步分析：

1. webpack的編譯目標是web項目，因此咱們要target: 'web',放在全局的webpack的配置裏面

1. 須要配置一個環境變量來區分咱們的生產環境和開發環境，輸入dos命令npm i cross-env，在打包和運行以前都加上環境變量標識：

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",

我的習慣：喜歡運行start，因此把run dev替換掉了："start": "npm run dev"
效果以下：

1. 再從webpack的配置里加個判斷，若是是開發環境，就把咱們的webpack服務放進去：

首先用一個變量表明是開發環境：const isDev = process.env.NODE_ENV === 'development';在package.json scripts裏面設置的生產和開發環境的環境變量都存在於cross-dev，咱們設置腳本的時候啓動的環境變量全都存在於process.env裏面，這樣咱們在以後能夠隨意調用它

而後在最下面給module.exports賦值以前，加個判斷：

if (isDev) {
    config.devServer = {
        port: 8088, // webpack服務須要監聽的端口號
        host: '0.0.0.0', // 能夠經過本機內網ip訪問,這樣別人也能夠訪問,手機也可訪問,若是設置成localhost則否則
        overlay: {
            errors: true // 這個無關緊要,webpack編譯出現的錯誤會出如今網頁中,便於更改
        }
    };
}

上述代碼中的配置項咱們在webpack官網中均可以看獲得，每一步的緣由我已在後面加了相關注釋。

1. 引入webpack，以便以後用webpack的插件，下面會用到DefinePlugin這個插件（ps:作vue或react的項目必須用到的，這些項目都會根據環境來區分打包）

const Webpack = require('webpack');

用法和以前的同樣，全部的插件都是須要引入並建立實例這一過程；下面根據以前配置好的環境變量在webpack編譯的過程當中，對寫的js代碼都會判斷環境，根據不一樣環境對代碼進行打包(咱們只想要"development",因此外面會加上單引號)，代碼以下：

new Webpack.DefinePlugin({
            'process-env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        })

1. 這也是最後一步，咱們到如今爲止尚未一個網頁入口，先安裝一個html-webpack-plugin，一樣的引入配置好了，運行一下項目就ok了

1. 項目是能運行了，可是咱們每次更新DOM的時候，頁面就得刷新，在這裏擴展幾個小tip：

webpack有個支持熱加載功能的插件HotModuleReplacementPlugin，再經過vue-loader讀取vue的組件，在devServer裏面配置一個hot: true，就造成了熱加載；

還一個是映射工具devtool，使用source-map作映射，將咱們壓縮文件中的代碼映射回源文件中的原始位置的方法，更輕鬆調試，谷歌和火狐都已經支持，文件大效率低，致使webpack編譯慢，而eval解析出來的會很亂，二合一是webpack提出來的有效的方法；

在CLI下的devServer下還有一個compress是用在全部服務端gzip 壓縮，這個在Yahoo雅虎軍規上有提到；

更多的好用的插件就去webpack官網瞭解吧

若是是本身建的html的小夥伴就能夠在html-webpack-plugin裏面配置它，以後再把帶有id是app的div放進html裏面，在app.vue裏面渲染的dom就會生成在html中：

用完了這個webpack我感受棒極了，之後項目必備品！

參考☟☟☟：
https://blog.csdn.net/c_kite/article/details/71279853
http://www.javashuo.com/article/p-ndhculqd-gw.html
http://www.javashuo.com/article/p-bovvnnty-gt.html
webpack官網

**若是喜歡本文的話單擊愛心加關注謝謝O(∩_∩)O~**

本文的全部內容均是一字一句敲上去的，但願你們閱讀完本文能夠有所收穫，由於能力有限，掌握的知識也是不夠全面，歡迎你們提出來一塊兒分享！謝謝O(∩_∩)O~

歡迎來個人GitHub，喜歡的能夠star，項目隨意fork，支持轉載但要下標註，同時恭候：個人簡書 Resume

等一下( •́ .̫ •̀ )，我還有最後一句話：

我愛你，

可咱們老是用最惡毒的話去傷害最愛的人，

而後再用最深的懺悔去挽回，

感情就在這樣的循環裏撕扯和消磨，

慢慢變的無跡可尋了，

咱們就這樣在嘶吼裏告別，

就像那些美好從未發生，

一切都會消失的，

感情也是，

一切都是須要守護的，

感情尤爲是，

再見...