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

我們提供的服務有：網站設計制作、成都做網站、微信公眾號開發、網站優化、網站認證、乾安ssl等。為成百上千家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的乾安網站制作公司

• entry 規定入口文件，一個或者多個
• output 規定輸出文件的位置
• loader 各個類型的轉換工具
• plugin 打包過程中各種自定義功能的插件

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')
  }
}

網站題目：webpack4從零學習常用配置(小結)-創新互聯
URL分享：http://m.newbst.com/article26/dissjg.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、App設計、品牌網站設計、網頁設計公司、自適應網站、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯