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

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

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

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

前端工程師需要了解的 webpack

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

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

基礎配置

初始化環(huán)境

npm init -y 初始化 npm 環(huán)境，然后安裝 webpack npm i webpack webpack-cli -D

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

const path = require('path')

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

網站題目：webpack4從零學習常用配置(小結)-創(chuàng)新互聯(lián)
URL分享：http://www.chinadenli.net/article26/dissjg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、App設計、品牌網站設計、網頁設計公司、自適應網站、軟件開發(fā)

廣告

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