原始的時候咱們編寫網頁程序,主要是編寫HTML文件,接着經過scrpit標籤引入一個index.js文件輔助編寫一些業務邏輯和DOM操做。若JS處理邏輯過多,index.js文件就會膨脹,並且編寫邏輯主要以面向過程爲主,很差維護和擴展。css
接着能夠考慮一些例如面向對象的思想,將index.js我呢見拆分爲header.js,content.js,sidebar.js文件,內部各自處理負責對象的邏輯,這樣維護就相對簡單了,例如header的交互有問題只須要關注header.js文件了。html
//index.js let dom = document.getElementById('root'); new Header(); new Sidebar(); new Content();
可是這樣的話又會引入一些問題:node
根據咱們如今的開發經驗,咱們能夠經過在index.js中經過ES Moudle的方式引入其餘JS文件來避免上述問題:webpack
import Header from './header.js' ... let dom = ... ...
可是直接這樣編寫index.js會報錯,由於瀏覽器不認識import語法,這裏就須要藉助webpack的一個功能。咱們嘗試安裝一下。web
首先咱們須要安裝node(包含npm),直接去官網下載便可。npm
這裏建議能夠安裝nvm,這是一個noode版本管理工具,當主機須要有多個不一樣node版本切換使用時能夠用它~json
首先咱們初始化一個使用npm的項目:瀏覽器
npm init lesson1
而後進入安裝webpack包,這裏須要安裝一個webpack-cli幫助咱們在命令行界面使用webpack的功能,安裝分爲全局安裝和項目安裝,全局安裝:性能優化
npm install -g webpack webpack-cli
這個方式不推薦,主要是可能產生版本衝突問題,例如兩個項目用的webpack版本不一樣,那麼你就沒辦法用全局工具處理。less
推薦項目中安裝,這裏推薦安裝一個固定的版原本進行後續練習,不然有可能出現一些異常:
npm install webpack@4.16.5 webpack-cli --save-dev
而後使用webpack翻譯index.js,這裏npx是npm提供的一個命令,幫助咱們在當前項目node_modules文件夾中找webpack:
npx webpack index.js
注意再次以前代碼有一些編寫事項要注意,首先index.jsimport的JS文件須要使用export導出,另外DOM節點須要每一個JS文件單獨獲取,沒辦法從index.js中得到:
function Header(){ let dom = document.getElementById('root') ... } export default Header;
接着正常狀況下瀏覽器應該成功打開翻譯後的index.html文件(默認應該會翻譯到項目下dist文件夾)
經過上述的使用過程你是否是以爲彷佛webpack是相似Babel那樣的JS的解析翻譯工具呢?
其實不是的,他在的遠遠沒有這個量級,他也只能解析相似import這樣的模塊交互語句。
這裏咱們直接引用官網話來解釋:
本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。
webpack其實把各個模塊打包到一塊兒的一種工具。別的功能和翻譯都是沒有的。
固然除了ES Module這種模塊引入規範,還有CommonJS 模塊引入規範(Node用的),此外還有CMD,ADM規範,這些模塊規範Webpack都是能夠識別的,例如CommonJS:
const Header = require('/header.js')
導出模塊:
function Header(){ ... } module.exports = Header;
最先的時候其實webpack是一個JS的模塊打包工具,只能require一下js文件,如今不只僅只能打包JS文件了,還能夠打包諸如css、png、jpg等等各類類型的文件。
這裏簡單介紹一下配置文件,webpack的具體如何打包你的項目就是依靠這個配置文件完成的,例如如何打包圖片文件?使用CommonJS仍是ES Module?
實際上webpack存在一個默認配置文件的,若是你須要更復雜的配置你能夠在項目下新增一個webpack.config.js文件。
接着咱們嘗試編寫一些基礎配置內容:
const path = require('path'); module.export = { mode:'development', // 打包模式,開發環境下打包輸出文件不會作壓縮等處理方便調試 entry:'./src/index.js' //入口文件,表示項目打包的起點文件 output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') // 打包文件放在哪裏,輸出文件名是啥 } }
接着咱們把以前編寫的源代碼放到src目錄下,從新打包就能夠了。
這裏用過React,Vue等小夥伴會以爲咱們以前好像沒有執行過相似npx webpack的命令,這是由於咱們使用了npm scripts,以npm run 方式來執行:
// package.json { "name":"lesson", ... "scripts":{ "bundle":"webpack" } }
而後咱們就能夠執行npm run bundle來代替 npx webpack了,這裏使用npm run會自動去node_modules裏面尋找因此不須要加上npx~
執行webpack打包過程當中命令行界面會彈出一些log信息: