上篇對(duì)模塊化打包工具的需求是：
能把新特性編譯，解決兼容性
能把散亂模塊打包到一起
能支持不同類型前端資源模塊化
對(duì)于上述需求，Webpack作為模塊打包工具滔以，能將零散的js代碼打包到一個(gè)文件中诊杆；
能通過(guò)Loader機(jī)制實(shí)現(xiàn)編譯轉(zhuǎn)換歼捐；
同時(shí)支持在JS中以模塊化的方式載入任意類型資源文件（例：在JS中加載css文件，被加載的css文件會(huì)通過(guò)style標(biāo)簽的方式工作）
Webpack 作為目前最主流的前端模塊打包器晨汹，提供了一整套前端項(xiàng)目模塊化方案豹储；不僅是JS文件，所有前端開(kāi)發(fā)涉及的資源都能進(jìn)行模塊化宰缤；
Webpack 4 以后的版本支持零配置的方式直接啟動(dòng)打包颂翼，整個(gè)過(guò)程會(huì)按照約定將 src/index.js 作為打包入口，最終打包的結(jié)果會(huì)存放到 dist/main.js 中慨灭。
上述代碼朦乏，在src文件夾下創(chuàng)建兩個(gè)JS文件，
- heading.js以ES Modules方式導(dǎo)出一個(gè)創(chuàng)建元素的函數(shù)氧骤；
- index.js引入并使用該模塊呻疹，
- 最后在html文件中通過(guò)script標(biāo)簽以模塊化的方式引入index.js
此時(shí)支持ES的瀏覽器中可以打開(kāi)html文件，一個(gè)h2標(biāo)題元素筹陵，click點(diǎn)擊之后出alert出彈窗
但存在兼容性風(fēng)險(xiǎn)刽锤，不支持的會(huì)報(bào)錯(cuò)；
所以此時(shí)需要用webpack打包工具將我們按照模塊化方式拆分的JS代碼重新打包到一起朦佩；
一并思、Webpack實(shí)現(xiàn)最基礎(chǔ)打包：
第一步，初始化package.json文件语稠，安裝webpack宋彼，webpack-cli
$ npm init --yes
$ npm i webpack webpack-cli --save-dev
P.S. webpack 是 Webpack 的核心模塊，webpack-cli 是 Webpack 的腳手架程序仙畦，用來(lái)在命令行中調(diào)用 Webpack输涕。
第二步，直接運(yùn)行webpack命令打包JS代碼
$ npx webpack
P.S. npx 是 npm 5.2 以后新增的一個(gè)命令慨畸，可以用來(lái)更方便的執(zhí)行遠(yuǎn)程模塊或者項(xiàng)目 node_modules 中的 CLI 程序莱坎。
執(zhí)行上述命令后，Webpack會(huì)默認(rèn)從src/index.js文件打包寸士，再根據(jù)代碼中的模塊導(dǎo)出載入操作檐什，自動(dòng)將所用到的代碼打包到一起
完成后，根目錄下多出一個(gè)dis文件夾弱卡，打包結(jié)果就存在于里面的main.js文件中
總結(jié)：對(duì)于Webpack最基本的使用：先初始化package.json文件乃正，然后安裝webpack + webpack-cli，最后執(zhí)行npx webpack打包谐宙，會(huì)有一個(gè)默認(rèn)路徑dist/main.js存放打包結(jié)果
此時(shí)我們?nèi)绻薷膇ndex.html中的引入文件為main.js，由于打包后的代碼不會(huì)再有import和export界弧，所以我們可以刪除 type=“module”（這是ES的一個(gè)語(yǔ)法凡蜻，用來(lái)區(qū)分引入的是模塊還是普通JS腳本）
還可以將Webpack命令定義到npm script中搭综，用起來(lái)更方便，直接npm run build
此時(shí)html引入打包后的文件也能正常顯示頁(yè)面划栓，并且這個(gè)文件是經(jīng)過(guò)webpack打包后的兼容性文件兑巾；
二、配置項(xiàng)：入口文件路徑/輸出包文件路徑
Webpack 4 以后的版本支持零配置的方式直接啟動(dòng)打包忠荞，整個(gè)過(guò)程會(huì)按照約定將 src/index.js 作為打包入口蒋歌，最終打包的結(jié)果會(huì)存放到 dist/main.js 中。
但很多時(shí)候我們需要對(duì)入口文件進(jìn)行路徑約定委煤，此時(shí)配置項(xiàng)為entry堂油，負(fù)責(zé)指定webpack打包的入口文件路徑
除了入口文件，打包之后的輸出文件路徑可以通過(guò)output屬性設(shè)置文件位置碧绞，output屬性的值必須是對(duì)象府框，其中filename指定輸出文件名稱，path指定輸出目錄(可選讥邻，默認(rèn)為dist)
總結(jié)：當(dāng)前提到的內(nèi)容為webpack如何打包（兩步）迫靖，然后打包文件可以script引入使用，還有兩個(gè)配置項(xiàng)屬性（入口文件兴使、輸出文件）
