13
webpack應用程序靜態模塊打包器 https://www.webpackjs.com/
入口 entry
輸出 output
loader
插件 plugins
webpack全局 項目內安裝
全局安裝
npm i webpack -g
npm i webpack-cli -g
檢測全局版本 webpack --version
項目內安裝
npm init -y
npm i webpack -D
npm i webpack-cli -D
檢測項目內版本
packjson.js文件
scripts：{“test”：“webpack --version”}
npm run test
1 操作
默認的入口文件 src/index.js
默認的出口文件 dist/main,js
2 development開發
production代碼壓縮了
webpack --mode development 就可以把index.js文件打包到dist文件下 。
重複輸入這個命令。就會再次更新成一個新的打包
全局的實時監控webpack --mode development -w
局部的實時監控，項目裏的，package.json文件
“scripts":{“build”:“webpack --mode development -w”}
npm run build 默認的配置文件是webpack.config.js
3 解決緩存問題（bundle[hash:8].js）
讓html 文件自動引入打包後的js文件
yarn add html-webpack-plugin 每次打包生成一個js文件
（注意是在webpack.config.js文件夾下引入和配置文件plugins:[new HtmlWebpackPlugin({tempiate:"./index.html"})]）
yarn add clean-webpack-plugin，目的是隻保留最新的打包文件，舊的都刪除
4 打包css文件
npm i style-loader css-loader/yarn add style-loader css-loader
5 打包圖片
yarn add url-loader file-loader
6 開發階段的服務器webpack-dev-server
項目中安裝 yarn add webpack-dev-server
自動有熱更新功能