webpack是什麼?
關於webpack是什麼 其實這個問題也很好解答 只需要開啟webpack的官網 首先映入眼簾便是這麼一段話 webpack is a module bundler 翻譯過來就是 webpack是一個模組打包工具 也就是說 當我們的專案工程變得非常龐大的時候 我們可以將專案拆分成一個個的模組 同時藉助webpack幫助我們打包最後整合在一起 這樣可以便於後期的維護和迭代
webpack的安裝
關於webpack的安裝 其實也就是通過npm安裝 只需要一行命令 簡單粗暴 值得注意的一點是 webpack最好是不要全域性安裝 否則容易引起因為webpack版本的問題 從而使得互相依賴的兩個專案有衝突
安裝命令: npm install webpack webpack-cli -D 安裝好以後 在命令列工具裡輸入 npx webpack -v 如果正確顯示版本號 那麼就是成功安裝了webpack
關於webpack-cli
聽起來像是像是一個webpack的腳手架工具是不是? 其實webpack-cli最大的作用在於 幫助我們可以在命令列裡 可以直接使用webpack這個命令 例如 藉助node提供的npx 可以直接在命令列裡進入專案 npx webpack
webpack打包命令簡化
寫過vue的同學應該很熟悉這個命令 npm run dev/start 其實就是通過專案裡package.json檔案下的npm scripts來改變了原先的webpack打包命令
dev表示的就是打包的命令 值就是一些打包的規則 後面會講到
webpack的loader
webpack其實只認識js工具 也就是說webpack只會自動識別.js字尾為結尾的檔案 清楚該怎麼打包js檔案 但是隨著專案的不斷擴充套件 只有js檔案是肯定不行的 所以這個時候 我們就需要藉助各種各樣的loader來幫助我們告訴webpack 這個是個什麼檔案 這個檔案要怎麼打包 這也就是loader的概念
現在假設 我們的專案下 有一個index.js檔案 和一個 index.css檔案 同時你在index.js檔案裡通過import或者require的方式引入了index.css 這個時候你想讓webpack打包 那麼一定是會報錯的 所以我們需要藉助一些loader來幫助我們 —— style-loader 和 css-loader
這兩個loader首先通過npm install 安裝在專案裡 同時在專案裡新建一個webpack.config.js檔案 做好如下配置 就可以讓webpack知道該如何打包.css檔案了 是不是很簡單
其中 鍵 test對應的是一個正則 也就是是什麼字尾的檔案 鍵 use對應的陣列就是 使用哪一些loader
loader之間的關係
關於這些loader的關係其實 首先css-loader幫助我們梳理各個css之間的關係 然後 style-css幫助我們將css檔案掛載到index.html檔案的頭部
postcss-loader
這個loader其實就是 藉助autoprefixer幫助我們自動新增廠商字首 使用這個loader的話 還需要配置一個額外postcss.config.js檔案
plugins
plugins 翻譯過來就是外掛 webpack也提供了非常多的外掛 來幫助我們在webpack打包的時候 自動的做一些事情 這裡介紹兩個外掛
① clean-webpack-plugin 這個外掛的作用在於 可以在我們每次打包之前 刪除掉原先打包好的檔案 具體使用方法 先通過npm install安裝該外掛 然後在webpack配置檔案裡 引入這個外掛
const CleanWebpackPlugin = require('clean-webpack-plugin')
最後在wepback的plugins這個欄位裡 新建一個例項plugins: [ new CleanWebpackPlugin({ cleanStaleWebpackAssets: true })
② HotModuleReplacementPlugin 看名字其實也就很簡單粗暴了 也就是熱更新 也就是 當程式碼變化的時候你不需要手動重新整理頁面 他可以自動幫你重新整理頁面 是不是還挺方便 具體配置的話 其實基本和第一個外掛大同小異 先安裝 然後引入 最後new一個例項就好了
new webpack.HotModuleReplacementPlugin()
devServer
通過配置devServer可以快速在本地構建一個http伺服器 首先 你需要在package.json的scripts欄位下 新增一條webpack打包的規則
