結合踩坑經驗，手把手教你webpack配置（webpack5.0）詳細教程！讀完立刻掌握webpack!

時間 2020-07-10

標籤結合經驗手把手 webpack 配置 webpack5.0 詳細教程讀完立刻掌握简体版

原文原文鏈接

一. 什麼是webpack？

本文代碼執行環境：node 10 以上，webpack 4 以上
複製代碼

1.概念

webpack 官網css

官網的定義：vue

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。
當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，
其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。
複製代碼

大白話理一下：node

1）看看你的項目webpack

有各類各樣的文件格式：.vue,.js,.css/less/scss/sass,圖片，字體圖標……
用到了ES6/7/8 語法 or 特性，以及更高級的語法
體積龐大的node_modules
src文件夾下，業務代碼文件的數量驚人
開發環境的跨域問題，解決時頭髮抓到禿
控制檯爆紅，點擊進去後發現和本身寫的源代碼不同
開發時，每次修改代碼都要手動刷新瀏覽器，調個樣式調到頭皮發麻
部署上線時，蹲守公司，王者打到沒電，月亮西斜，項目還在打包
...

2）試想一下web

這樣的數量的文件直接如果上傳到服務器，得傳多久？npm
瀏覽器挨個讀取這麼多數量的js文件，而後挨個分析，挨個結合這麼多數量的css文件，最後組裝呈如今用戶面前，用戶得等多久？跨域
ES6/7/8等高級語法瀏覽器不認識，怎麼辦？瀏覽器
……緩存

3）而後，你忽然發現這些問題webpack都輕鬆搞定了。如圖所示 sass

這張圖中，webpack作了大量工做

文件種類多，業務代碼複雜，webpack經過分析依賴進行模塊合併，歸類後壓縮，文件體積變小了
高級/新興語法，webpack進行代碼校驗，轉譯，變成瀏覽器認識的 js
考慮到速度痛點，webpack在分析依賴的時候使用了高級手段，大大增速
node_modules體積龐大，只要你告訴webpack，它就會智能忽略一些你沒用到的部分，加快打包速度
webpack在打包的時候還進行了代碼分割/分離，多模塊共享，防止重複分析/加載

針對上邊列舉的痛點/問題，貼心的webpack一樣解決了

webpack可讓瀏覽器自動刷新，並且是局部刷新，讓你實時看到代碼修改效果
開發環境的跨域問題，跨域經過webpack配置輕鬆解決
SPA應用，經過按需加載，懶加載，代碼分割，使用緩存動態打包等，能夠大大加快首屏速度，讓你的用戶小可愛再也不久等

經過上邊的一堆文字，此時你的心中應該明白了webpack是幹什麼的，它有什麼用。世上任何概念的定義，都是從其性質，適用範圍，做用來下的。看到這裏的你，腦中已經有了webpack的概念吧？

2. 核心組成

入口（Entry）
出口（Output）
loaders
插件 (Plugins)
mode (模式：開發or生產)
Browser Compatibility 瀏覽器兼容（webpack5.0新增）
Environment 環境（webpack5.0新增）

開始配置前，你須要在根目錄建立一個 webpack.config.js文件

2.1 入口與出口

這兩個的配置只須要注意兩點：出入口數量對應，出入口的路徑

數量一致：一入口 VS 一出口，多入口vs 多出口

出入口路徑：入口：相對路徑；出口：絕對路徑

爲保證路徑準確，須要用到node內置的 path模塊，直接require便可

//關於path的用法，小可愛們自行百度
const path = require('path')

// webpack的配置文件遵循着CommonJS規範。什麼是ommonJS規範？小可愛們自行百度
module.exports = {
    entry: './src/main.js',
    output: {
        // path.resolve() : 該方法解析當前相對路徑的絕對路徑
        // path.join（）：用於路徑拼接
        // output 必須是絕對路徑，不然報錯
        // 方法一：path: path.resolve(__dirname, './dist/'),
        // 方法二：path: path.join(__dirname, './dist/'),
        filename: 'bundle.js' //指定打包後的文件名
    },
}
複製代碼

2.2 loaders

webpack默認只處理js文件，其餘非js文件，就須要loaders出馬

（1）注意loaders的執行順序：從下到上，從右到左

在平時配置的時候要在查清楚各個loaders的使用先後規則，不然會報錯

（2）能夠手動干預它們的執行順序嗎？

能夠，在use後再加個enforce屬性進行配置便可

enforce 可選值：pre:提早；post：後置

（3）webpack 全部類型loaders的執行順序：pre > inline > normal > post

inline 指的是在模塊中使用import等語法導入，進行單獨處理的狀況，具體小可愛們自行查看官網/百度

（4）通用的配置

無高級語法的狀況下

loaders在webpack的低版本中的寫法與如今不一樣，4，5版本的寫法一致，記住如下寫法便可

module 與出入口平級：

module : [ rules : [ {test:// , use:[]/''} ]
複製代碼

下面的代碼中url-loader用於處理，歸類圖片，打包後項目中的圖片都會集中放在配置的文件夾下，這裏體現了webpack的壓縮，歸類功能

必定要記住！！！

先npm裝一下包，而後再配置
配置exclude: /node_modules/忽略該文件夾的解析，校驗和轉譯，配置後將大大加快打包速度！

module.exports = {

    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'bundle.js' //指定打包後的文件名
    },
        
     module: {
            rules: [
    
              {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                },
                {
                    test: /\.s(a|c)ss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                // url-loader 基於file-loader 兩個功能差很少，只是url-loader 比後者多了些可設置的options
                {
                    test: /\.(jpg|jpeg|png|bmp|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 5 * 1024, //此大小範圍內的圖片轉換成base64，節省請求開銷
                            outputPath: 'images', //dist下建立images文件夾，統一放圖片
                            name: '[name]-[hash:4].[ext]' // 圖片文件名+hash值取4位數，ext:原後綴名
                        }
                    }
                },
                {
                    test: /\.(woff|woff2|eot|svg|ttf)$/,
                    use: 'url-loader'
                },
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        // options: {
                        //   presets: ['@babel/env'],
                        //   plugins: [
                        //     '@babel/plugin-proposal-class-properties',
                        //     '@babel/plugin-transform-runtime'
                        //   ]
                        // }
                    },
                    exclude: /node_modules/,
                }
            ]
        },
    }
複製代碼

（5）不可忽視的 babel

高級語法的狀況下

babel 的主要做用用於轉譯，將高級語法轉換成瀏覽器識別的語法

隨着項目的不斷擴大，你會發現你不知不覺中用了不少 babel 家族的loader和插件，這個時候官方建議咱們在根目錄下建立一個.babelrc文件，專門用來配置babel 家族

有個特別須要注意的點：

配置完babel-loader後，項目能夠轉換ES6諸如class定義類這樣的語法，可是原型新增的方法[].inculdes()這種，babel 默認是沒法轉換的，須要裝一個補丁polyfill

npm i @babel/polyfill -S
複製代碼

在入口處配置

entry: ['@babel/polyfill', './src/main.js'],
複製代碼

或者，在使用新方法的地方引入:

import '@babel/polyfill'
複製代碼

webpack 官方說5.x之後將取消這個補丁，粗略看了一下更新好像沒有移除，辛苦小可愛們給我科普一下，這個補丁後來怎麼樣了

2.3 插件 (Plugins)

loader作不到的事，插件作！

步驟：

npm裝包
webapck官網查看你裝的包怎麼配置

這一塊，實在不知不知道還要講啥，就上圖示範一下配置位置吧

plugins 與出入口平級

const path = require('path')

module.exports = {

    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'bundle.js' //指定打包後的文件名
    },
        
     module: {
            rules: [
              {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                },
                {
                    test: /\.s(a|c)ss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                // url-loader 基於file-loader 兩個功能差很少，只是url-loader 比後者多了些可設置的options
                {
                    test: /\.(jpg|jpeg|png|bmp|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 5 * 1024, //此大小範圍內的圖片轉換成base64，節省請求開銷
                            outputPath: 'images', //dist下建立images文件夾，統一放圖片
                            name: '[name]-[hash:4].[ext]' // 圖片文件名+hash值取4位數，ext:原後綴名
                        }
                    }
                },
                {
                    test: /\.(woff|woff2|eot|svg|ttf)$/,
                    use: 'url-loader'
                },
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        // options: {
                        //   presets: ['@babel/env'],
                        //   plugins: [
                        //     '@babel/plugin-proposal-class-properties',
                        //     '@babel/plugin-transform-runtime'
                        //   ]
                        // }
                    },
                    exclude: /node_modules/,
                }
            ]
        },
        plugins: [
        //如下插件是舉例：
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([{
            from: path.join(__dirname, 'assets'),
            to: 'assets'
        }]),
    ],
    }

複製代碼