第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

webpack安裝：

1. cd/imooc?

2. 新建文件夾 mkdir webpack-test

3. cd webpack-test

4. 初始化 npm npm init

5. 安裝 webpack npm install webpack --save-dev?

   （--save：dependencies運(yùn)行時(shí)依賴；--save-dev：devDependencies是開發(fā)時(shí)的依賴）

6. webpack天生是不支持css類型的，因此處理css文件需要依賴loader? ? ? ? ? ?安裝 loader? npm install css-loader style-loader?--save-dev? ? ? ? ? ? ? ? ? ? ?require('style-loader!css-loader!./style.css')

7. 命令行指定 webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch(參數(shù)：自動(dòng)更新和打包)

webpack模塊打包工具

插件 html-webpack-plugin

安裝與卸載：

刪除本地（局部）webpack-cli

npm?uninstall?webpack-cli

刪除全局webpack

npm?uninstall?-g?webpack

刪除本地webpack

npm?un?webpack

安裝webpack：

1、創(chuàng)建一個(gè)新的本地項(xiàng)目目錄名為webpack-demo

mkdir?webpack-demo

2、進(jìn)入目錄

cd?webpack-demo

3、創(chuàng)建package.json文件

npm?init?-y

4、安裝webpack

# 要安裝最新版本或特定版本，請運(yùn)行以下命令之一：

# 第一個(gè)安裝方式默認(rèn)安裝最新版本

npm?install?--save-dev?webpack

# 第二個(gè)安裝方式是安裝你需要的版本

npm?install?--save-dev?webpack@

5、安裝webpack-cli

npm?install?--save-dev?webpack-cli

# 不要忘記webpack4.+開始webpack-cli是必備的哦

6、檢查webpack是否安裝成功

node_modules/.bin/webpack?-v

# 執(zhí)行了這個(gè)命令以后會(huì)輸出一個(gè)版本號

# 因?yàn)閣ebpack在不斷更新所以我們的版本號會(huì)有點(diǎn)區(qū)別，不是什么問題

測試打包：

#前面是打包文件的名稱，后面的是打包后的名稱

webpack?hellow.js?hello.bundle.js

中文官網(wǎng):https://webpack.docschina.org/

中文文檔:https://webpack.docschina.org/concepts/

定義:一個(gè)模塊的打包器

(目標(biāo))功能:

1、切分依賴樹(切分到不同的代碼塊,按需加載,跟懶加載概念類似)

2、保持初始化加載時(shí)間更少

3、任何一個(gè)靜態(tài)資源,都可被視為一個(gè)模塊在項(xiàng)目中被引用

4、整合第三方類庫,并把第三方類庫視為它的模塊在項(xiàng)目中引用

5、可以在整個(gè)項(xiàng)目打包的每個(gè)過程中自定義想做的事

6、適合大型項(xiàng)目

跟其他打包工具的區(qū)別:

1、代碼分割

2、loaders概念

3、插件系統(tǒng),模塊熱更新特性(提高開發(fā)和調(diào)試效率)

改變資源文件引入形式，提高加載效率

采用url形式引入資源文件，頁面會(huì)多次通過http請求資源文件，一定程度上影響頁面加載速度，可以將文件內(nèi)容直接引入代碼中來優(yōu)化性能。

注意：將htmlwebpackPlugin中的inject設(shè)置能false，取消自動(dòng)注入

多頁面入口配置

設(shè)置打包壓縮規(guī)則

打包路徑修改，若不設(shè)置publicPath則使用相對路徑

html文件中直接使用htmlWebpackPlugin

htmlWebpackPlugin.files：獲取打包后的文件信息

htmlWebpackPlugin.options：獲取package.json中htmlWebpackPlugin的全部屬性

注意：通過這種方式注入js引用，應(yīng)將inject改為false，否則引用文件會(huì)重復(fù)生成。

html-webpack-plugin其他配置

filename：指定html打包后的文件名稱

template：指定打包html模板，將基于模板進(jìn)行打包

inject：指定自動(dòng)生成文件位置

使打包后的文件存放到相應(yīng)的目錄結(jié)構(gòu)中

使用webpack插件html-webpack-plugin自動(dòng)化生成項(xiàng)目中的html頁面

命令：npm install html-webpack-plugin --save

在webpack.config.js中配置template，可使打包后的index.html基于制定文件自動(dòng)生成關(guān)聯(lián)js或css引用，能夠有效避免因hash變化而每次都需改動(dòng)引用路徑的問題。