webpack4-01:概念與零配置Hello World

時間 2019-12-04

標籤 webpack4 webpack 概念配置 hello world 简体版

原文原文鏈接

前提

本人才疏學淺，若有描述不對，或者理解錯誤的地方歡迎指出。會及時改正！html

此教程基於windows 64位操做系統node

Nodejs 版本：v10.15.1
npm : 6.4.1
webpack : 4.30.0

概念

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。webpack

從 webpack v4.0.0 開始，能夠不用引入一個配置文件也能完成簡陋的打包效果。git

在開始以前，請確保安裝了Node.js的最新版本。使用 Node.js 最新的長期支持版本(LTS - Long Term Support)，理想的起步。使用舊版本，你可能遇到各類問題，由於它們可能缺乏 webpack 功能以及/或者缺乏相關 package 包。github

本地安裝

webpack v4+ 開始須要與webpack-cli（此工具用於在命令行中運行 webpack）一塊兒安裝：web

mkdir lesson-01 && cd lesson-01
npm init -y
npm i webpack webpack-cli -D
複製代碼

補充：npm

npm init -y 中 -y是 --yes 的簡寫，若是不加會一直讓你敲回車，省去敲回車的過程。
-D 是 --save-dev 的簡寫，意思是包的依賴出如今到根目錄下的 package.json 內的 devDependencies 對象中,此對象是用於開發環境所依賴的包。
-S 是 --save 的簡寫，包的依賴出如今 dependencies 對象中，此對象是生產環境所依賴的包。

注意點

當安裝完成webpack、webpack-cli後，運行時：json

webpack -v

'webpack' 不是內部或外部命令，也不是可運行的程序
或批處理文件。
複製代碼

發現webpack不是內部指令，實際上是沒有全局webpack變量的緣由，可是官方不推薦全局安裝 webpack，由於這樣這會將你項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中，可能會致使構建失敗。windows

解決辦法

咱們在安裝Node.js的時候,順帶的把npm、npx安裝了，在這裏重點是npx，因此咱們須要使用npx運行webpack的命令。以下：瀏覽器

npx webpack -v

4.30.0
複製代碼

這樣就解決了不安裝全局webpack致使的問題。

Hello World

解決上面問題後，進入正題，零配置Hello World。

新增src/index.js、index.hmtl文件。目錄以下：

lesson-01
  |- node-modules
  |- package.json
  |- package-lock.json
+ |- /src
+   |- index.js
+ |- index.html

複製代碼

src/index.js

console.log('Hello World!');
複製代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="./dist/main.js"></script>
</body>
</html>
複製代碼

如今使用npx運行webpack命令：

npx webpack

Hash: 512808a97d0c43adbe09
Version: webpack 4.30.0
Time: 602ms
Built at: 2019-04-21 10:51:34
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 28 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
複製代碼

運行後，會看到根目錄下生成了dist/main.js目錄及文件。這是webpack v4+ 默認導出打包的路徑以及文件名稱，而默認打包的入口既是src/index.js。

在看看上面的打包結果發現有一個警告，意思是在webpack v4+ 開始須要一個mode的配置選項，此選擇是用來選擇打包的模式，選項有兩個值，分別爲：development、production，開發環境、生產環境。不配置默使用的是production，可是不寫參數會有此警告。因此儘量的寫上mode參數！

在運行命令以前，觀察dist/main.js文件的變化，便可知道參數值不一樣的打包效果。

如今咱們再次運行一下webpack命令：

npx webpack --mode development

Hash: 44b171184298522aaf01
Version: webpack 4.30.0
Time: 128ms
Built at: 2019-04-21 11:04:20
  Asset     Size  Chunks             Chunk Names
main.js  3.8 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 28 bytes {main} [built]
複製代碼

如今已經解決警告的問題。