1. webpack簡介

1.1 webpack是什么

webpack 是一種前端資源構建工具，一個靜態模塊打包器(module bundler)。 在 webpack 看來, 前端的所有資源文件(js/json/css/img/less/...)都會作為模塊處理。 它將根據模塊的依賴關系進行靜態分析，打包生成對應的靜態資源(bundle)。

?

1.2 webpack的五個核心概念

Entry

入口(Entry)指示 webpack 以哪個文件為入口起點開始打包，分析構建內部依賴圖。

Output

輸出(Output)指示 webpack 打包后的資源 bundles 輸出到哪里去，以及如何命名。

Loader

Loader 讓 webpack 能夠去處理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)

Plugins

插件(Plugins)可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮， 一直到重新定義環境中的變量等。

Mode

模式(Mode)指示 webpack 使用相應模式的配置。

選項描述特點

development	會將 DefinePlugin 中 process.env.NODE_ENV 的值設置 為 development。啟用 NamedChunksPlugin 和NamedModulesPlugin。	能讓代碼本地調試運行的環境
production	會將 DefinePlugin 中 process.env.NODE_ENV 的值設置為 production。啟用 FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 TerserPlugin。	能讓代碼優化上線運行的環境

2. webpack初體驗

下面所有代碼演示的webpack版本為 4.44.2

npm install webpack@4.44.2 -g

2.1 初始化配置

1）初始化 package.json

npm init

2）下載并安裝 webpack

npm install webpack webpack-cli -g npm install webpack webpack-cli -D

2.2 編譯打包應用

1）創建文件

2）運行指令

開發環境指令：

webpack src/js/index.js -o build/js/built.js --mode=development

功能：webpack 能夠編譯打包 js 和 json 文件，并且能將 es6 的模塊化語法轉換成瀏覽器能識別的語法。

生產環境指令:

webpack src/js/index.js -o build/js/built.js --mode=production

功能：在開發配置功能上多一個功能，壓縮代碼。

3）注意

webpack 能夠編譯打包 js 和 json 文件。 能將 es6 的模塊化語法轉換成瀏覽器能識別的語法。 能壓縮代碼。

不能編譯打包 css、img 等文件。 不能將 js 的 es6 基本語法轉化為 es5 以下語法。

2.3 代碼演示

我們創建一個目錄，并初始化配置，目錄下會生成一個package.json和package-lock.json文件。

創建index.js

import data from './data.json'; console.log(data); ? function add(x, y) {return x + y; } ? console.log(add(1, 2)); ?

data.json

{"name": "jack","age": 18 }

運行打包命令

webpack ./src/index.js -o ./build/built.js --mode=development

最終的文件目錄如下：

我們使用 node命令運行main.js，可以看到如下輸出：

{ name: 'jack', age: 18 } 3

總結

以上是生活随笔為你收集整理的webpack从入门到精通（一）初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。