webpack 的核心價值就是前端源碼的打包，即將前端源碼中每一個文件（無論任何類型）都當做一個 pack ，然后分析依賴，將其最終打包出線上運行的代碼。webpack 的四個核心部分

webpack 如今已經進入 v4.x 版本，v5.x 估計也會很快發布。不過看 v5 的變化相比于 v4 ，常用的配置沒有變，這是一個好消息，說明基本穩定。

前端工程師需要了解的 webpack

前端工程化是近幾年前端發展迅速的主要推手之一，webpack 無疑是前端工程化的核心工具。目前前端工程化工具還沒有到一鍵生成，或者重度繼承到某個 IDE 中（雖然有些 cli 工具可以直接創建），還是需要開發人員手動做一些配置。

因此，作為前端開發人員，熟練應用 webpack 的常用配置、常用優化方案是必備的技能 —— 這也正是本文的內容。另外，webpack 的實現原理算是一個加分項，不要求所有開發人員掌握，本文也沒有涉及。

基礎配置

初始化環境

npm init -y 初始化 npm 環境，然后安裝 webpack npm i webpack webpack-cli -D

新建 src 目錄并在其中新建 index.js ，隨便寫點 console.log('index js') 。然后根目錄創建 webpack.config.js ，內容如下

const path = require('path')module.exports = {  // mode 可選 development 或 production ，默認為后者  // production 會默認壓縮代碼并進行其他優化（如 tree shaking）  mode: 'development',  entry: path.join(__dirname, 'src', 'index'),  output: {    filename: 'bundle.js',    path: path.join(__dirname, 'dist')  }}

然后增加 package.json 的 scripts

 "scripts": {  "build": "webpack" },

然后運行 npm run build 即可打包文件到 dist 目錄。

區分 dev 和 build

使用 webpack 需要兩個最基本的功能：第一，開發的代碼運行一下看看是否有效；第二，開發完畢了將代碼打包出來。這兩個操作的需求、配置都是完全不一樣的。例如，運行代碼時不需要壓縮以便 debug ，而打包代碼時就需要壓縮以減少文件體積。因此，這里我們還是先把兩者分開，方便接下來各個步驟的講解。

首先，安裝 npm i webpack-merge -D ，然后根目錄新建 build 目錄，其中新建如下三個文件。

// webpack.common.js 公共的配置const path = require('path')const srcPath = path.join(__dirname, '..', 'src')const distPath = path.join(__dirname, '..', 'dist')module.exports = {  entry: path.join(srcPath, 'index')}

// webpack.dev.js 運行代碼的配置（該文件暫時用不到，先創建了，下文會用到）const path = require('path')const webpackCommonConf = require('./webpack.common.js')const { smart } = require('webpack-merge')const srcPath = path.join(__dirname, '..', 'src')const distPath = path.join(__dirname, '..', 'dist')module.exports = smart(webpackCommonConf, {  mode: 'development'})