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

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

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

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

前端工程師需要了解的 webpack

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

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

基礎(chǔ)配置

初始化環(huán)境

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

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

const path = require('path')

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

網(wǎng)站題目：webpack4從零學(xué)習(xí)常用配置(小結(jié))-創(chuàng)新互聯(lián)
URL分享：http://jinyejixie.com/article26/dissjg.html

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

廣告

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