-
webpack安裝：
cd/imooc?
新建文件夾 mkdir webpack-test
cd webpack-test
初始化 npm npm init
安裝 webpack npm install webpack --save-dev?
（--save：dependencies運行時依賴；--save-dev：devDependencies是開發時的依賴）
webpack天生是不支持css類型的，因此處理css文件需要依賴loader? ? ? ? ? ?安裝 loader? npm install css-loader style-loader?--save-dev? ? ? ? ? ? ? ? ? ? ?require('style-loader!css-loader!./style.css')
命令行指定 webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch(參數：自動更新和打包)
查看全部 -
webpack模塊打包工具
查看全部 -
插件 html-webpack-plugin
查看全部 -
安裝與卸載：
刪除本地（局部）webpack-cli
npm?uninstall?webpack-cli
刪除全局webpack
npm?uninstall?-g?webpack
刪除本地webpack
npm?un?webpack
安裝webpack：
1、創建一個新的本地項目目錄名為webpack-demo
mkdir?webpack-demo
2、進入目錄
cd?webpack-demo
3、創建package.json文件
npm?init?-y
4、安裝webpack
# 要安裝最新版本或特定版本，請運行以下命令之一：
# 第一個安裝方式默認安裝最新版本
npm?install?--save-dev?webpack
# 第二個安裝方式是安裝你需要的版本
npm?install?--save-dev?webpack@
5、安裝webpack-cli
npm?install?--save-dev?webpack-cli
# 不要忘記webpack4.+開始webpack-cli是必備的哦
6、檢查webpack是否安裝成功
node_modules/.bin/webpack?-v
# 執行了這個命令以后會輸出一個版本號
# 因為webpack在不斷更新所以我們的版本號會有點區別，不是什么問題
測試打包：
#前面是打包文件的名稱，后面的是打包后的名稱
webpack?hellow.js?hello.bundle.js
查看全部 -
中文官網:https://webpack.docschina.org/
中文文檔:https://webpack.docschina.org/concepts/
定義:一個模塊的打包器
(目標)功能:
1、切分依賴樹(切分到不同的代碼塊,按需加載,跟懶加載概念類似)
2、保持初始化加載時間更少
3、任何一個靜態資源,都可被視為一個模塊在項目中被引用
4、整合第三方類庫,并把第三方類庫視為它的模塊在項目中引用
5、可以在整個項目打包的每個過程中自定義想做的事
6、適合大型項目
跟其他打包工具的區別:
1、代碼分割
2、loaders概念
3、插件系統,模塊熱更新特性(提高開發和調試效率)
查看全部 -
巧克力據統計 氣球圖查看全部
-
第一課查看全部
-
改變資源文件引入形式，提高加載效率
采用url形式引入資源文件，頁面會多次通過http請求資源文件，一定程度上影響頁面加載速度，可以將文件內容直接引入代碼中來優化性能。
注意：將htmlwebpackPlugin中的inject設置能false，取消自動注入
查看全部 -
多頁面入口配置
查看全部 -
設置打包壓縮規則
查看全部 -
打包路徑修改，若不設置publicPath則使用相對路徑
查看全部 -
html文件中直接使用htmlWebpackPlugin
htmlWebpackPlugin.files：獲取打包后的文件信息
htmlWebpackPlugin.options：獲取package.json中htmlWebpackPlugin的全部屬性
注意：通過這種方式注入js引用，應將inject改為false，否則引用文件會重復生成。
查看全部 -
html-webpack-plugin其他配置
filename：指定html打包后的文件名稱
template：指定打包html模板，將基于模板進行打包
inject：指定自動生成文件位置
查看全部 -
使打包后的文件存放到相應的目錄結構中
查看全部 -
使用webpack插件html-webpack-plugin自動化生成項目中的html頁面
命令：npm install html-webpack-plugin --save
在webpack.config.js中配置template，可使打包后的index.html基于制定文件自動生成關聯js或css引用，能夠有效避免因hash變化而每次都需改動引用路徑的問題。
查看全部
舉報