基於vue2.X的webpack基本配置(手動版~)

webpack(4)說複雜也不復雜。不復雜，核心概念不外乎是entry, output, loader, plugins。webpack4還新增了optimization選項，用於代碼分割和打包優化。如今webpack官網文檔已經寫的挺棒了。

然鵝，當你真正開始手寫一個webpack.config.js的時候，你就會發現，要記得東西有點兒多，還挺複雜的……

好啦，Ladies and Gentleman，本文講的是手動編寫基於vue開發的webpack4配置，如下內容主要針對生產環境，開發環境的配置於以後奉上。 created by 2018.07.22 。

---

webpack的核心概念包含如下幾個，要牢記：

• entry - webpack打包的入口，並不是代碼執行的入口；
• output - webpack打包後生成的靜態資源文件，它是最終會被html引用的文件；
• loader - 對於非js的模塊(或說文件)，轉化成webpack可以處理的js文件；對於還要進一步處理的js文件進行加工處理；
• plugins - 參與到整個webpack打包的過程（webpack打包的各個生命週期），可與loader結合使用，提供相應/輔助的功能。

Entry:
entry能夠是單個入口，也能夠是多入口。
單個入口的寫法:

entry: 'a.js' 或 ['a.js', 'b.js']

多個入口的寫法:

entry: {
  a: 'a.js',
  b: 'b.js'
}

webpack會以你給的entry爲入口，根據dependency graph，挨個打包，結合其餘相應的設置，最終輸出成頁面要引用的靜態資源文件。注意了，這裏提到的「結合其餘相應的設置」，極可能是不止一處的設置。😂😂😂

output
output裏面的選項主要有（但遠不止如下）:

• filename: '[name].[hash].bundle.js' // [name]和entry裏面的name對應
• path: path.resolve(__dirname, 'dist') // 指最終打包生成的目錄
• publicPath: 能夠是'./dist/' 或 '/' 或 cdn地址 // 指外部訪問靜態資源文件的路徑
• chunkFilename: '[name].chunk.js' // 指用webpack.ensure或import().then()動態加載的文件

loader
loader就是把模塊轉換成webpack可以處理的js文件（如css,scss,vue等非js模塊），或者對js模塊自己進行再加工(如編譯es6語法等)。
loader的寫法好有好幾種，loader通常放在module這個對象裏的rules裏面，現總結如下4種：

module: {
    rules: [
        { //第一種, 須要用到的loader簡單的放在use數組裏
            test: /\.(sa|sc|c)ss$/,
            use: [
              devMode ? 'style-loader' :    MiniCssExtractPlugin.loader,
              'css-loader',
              'postcss-loader',
              'sass-loader',
            ],
        },
        {// 第二種，use裏面是一個個對象，這種方式能夠給loader進行配置
            test: /\.css$/,
            use: [
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('autoprefixer')({
                                browsers: ['iOS >= 7', 'Android >= 4.1']
                            }),
                        ]
                    }
                }
            ]
        },
        {//第三種，單個loader和對象loader一塊兒放在use數組裏
            test: /\.(png|jpg|jpeg|gif)$/i
            use: [
                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    optiosn: {
                        pngquant: {
                            quality: '65-80'
                        }
                    }
                }
            ]
        },
        {//簡單使用loader，不用use
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ]
}

總結一下loader的經常使用四種寫法：
use: [xxx, xxx]
use: [{loader: XXX}, {loader: XXX}]
use: [{
    loader: XXX,
    options: {}
}, 'XXX']
loader: [XXX, XXX] 或 loader:XXX, options: {XXX}
😂😂😂

經常使用的loader有:

• 處理樣式的：style-loader,css-loader,postcss-loader,sass-loader,less-loder
• 處理es6的：babel-loader（要連同babel-core, babel-preset-env）一塊兒用
• 處理圖片的：file-loader, url-loader, image-webpack-loader

Plugins
經常使用的plugin有：

• 壓縮js：uglifyjs-webpack-plugin
• 合併&壓縮css： mini-css-extract-plugin，optimize-css-assets-webpack-plugin
• 清除目錄：clean-webpack-plugin
• 生成html：html-webpack-plugin
• postcss相關的：postcss-plugin-px2rem，postcss-preset-env，postcss-sprites，autoprefixer
• webpack自帶的方法：webpack.ProvidePlugin等

是否是開始以爲要記得東西不少啊？蛤蛤蛤蛤蛤蛤，不要急，要記得東西遠不止這些……

---

以上講的都是些概念和基本配置，結合起來怎麼用呢？
先上目錄：

由於只寫一個註冊頁，筆者沒有用vue-cli，選擇手動擼一個vue的webpack配置。

打包編譯vue文件，須要用到vue-loader，樣式須要用vue-style-loader，那麼<template>怎麼辦呢？必定記住安裝vue-template-compiler，雖然它只存在於你的node_modules文件夾中，可是vue-loader須要用到它，因此務必記住安裝。

另外，在loader中設置了vue-loader以外，還得設置一個變量const { VueLoaderPlugin } = require('vue-loader')，而且在plugins裏面建立一個它的實例才行，即new VueLoaderPlugin()。

ps. 系不繫感受複雜了？我也布吉島爲神馬這些配置要分散在不一樣地方進行配置，這就加重了webpack上手的難度。。。。

在咱們書寫配置的時候，必定要清楚本身想要webpack幫助你達到什麼目的，以此來選擇須要的loader和plugin以及其餘輔助工具。

除了上面講到的轉化vue模塊外，在生產環境下，我須要webpack幫助個人主要是打包、壓縮js,css,images，自動生成html文件，以及每次打包前先刪除已存在的dist目錄。因此上圖中所引入的模塊就是能完成這些功能的基本工具。

---

這個是利用你的template文件生成最終的html文件，並對html文件進行打包壓縮的，它會把html文件打包壓縮成以下：

---

上面兩張圖分別在loader和plugins裏面用到，它們結合在一塊兒能夠把css樣式文件打包成一個css靜態資源文件，經過link標籤引入進html文檔中。

---

在webpack4中，打包壓縮JS和CSS均可以在optimization這個對象裏進行。若是不寫minimize，則mode爲production時webpack會自動開啓uglifyjs的操做。假若寫了minimize，裏面卻不配置uglifyjs，則這個自動的操做會被取消。（是否是暈暈的😂😂😂）
它們分別會讓你的js和css文件打包壓縮成以下：

另外webpack最顯著的特色，這也是webpack創始人打造它的初衷，就是code splitting！既然如此，咱們固然要發揮webpack這個特色，幫助咱們優化！注意哦，代碼分割是內置在webpack裏面的方法。在webpack4中，它在optimization裏面配置，也就是取代了以前的commonsChunkPlugin這個插件。以下：

另外，runtimeChunk用來單獨打包壓縮運行時的webpack代碼。

至此，通過npm run build以後，代碼執行的入口文件爲如下四個：

再讓咱們來分析一下打包後的文件大小，總之我打包後vendor變得很大，即使uglify了，也有188k。這可不行！這時候請記住plugin: compression-webpack-plugin。
而後以下圖在plugins裏面建立一個它的實例：

這樣一來，打包後你生成的文件就會包含一個vendor.bundle.js.gz二進制格式的壓縮文件。以下圖：

很開薰是否是？可是咱們打包後dist/index.html中引用的是vendor.bundle.js，並非這個.gz的壓縮文件，怎麼辦？
這時候就須要後端配合修改一下nginx的配置，增長gzip_static on。僅僅有gzip on是不行滴。

而後你再打開頁面就會發現vendor.bundle.js變成了63.4k。雖然尚未達到個人要求，可是已經縮水一半以上了！

補充說一下webpack4「動態引入」的不一樣，若是要用import().then()這個動態引入方法，須要安裝babel-plugin-dynamic-import-webpack這個插件才行。

總結一下webpack的複雜性，整體來說就是要記得東西不少，有點「無厘頭，沒規律」，具體來講至少包含如下幾個方面：

1. 有些功能用loader就完事了，可有些還要配合着plugins去寫。有些loader自己要配置plugins，有些loader須要到外面大plugins對象裏進行設置。沒有統一的規律遵循，比較雜亂；
2. 不一樣loader和plugins配置項能夠不少，不一樣版本也不同（但願之後版本更迭的成本小一些，給開發者多一些溫油）；
3. 像babel這樣的，要注意不一樣版本的差異，不然會報錯。babel-loader, babel-core, babel-preset, babel-polyfill必定要對應着來。而且用了babel-loader並不久完事了，要去設置對應的presets告訴babel要把你的es6編譯成啥樣的規範，能夠寫在options裏，也能夠在根目錄設置.babelrc。另外要編譯es方法和函數還要用到polyfill，若是是開發框架則要用另外一個babel-plugin--transform-runtime --save-dev和babel-runtime --save。

總之要記的不少就是了。。。

可是呢，若是能記住這些雜碎的東西，webpack能幫助你作到不少事！也就以爲沒那麼複雜了。話雖如此，要弄懂原理是另外一回事啦。😂😂😂

good night~