【手動搭建專案】--------webpack---------【格爾尼卡ぃ】
阿新 • • 發佈:2018-12-05
什麼是webpack?
模組化打包器
作用:將瀏覽器不識別的語法 轉換成瀏覽器識別的語法
工作流程:
通過一個入口檔案,找個這個入口檔案所依賴的所有模組 通過loader進行打包,打包成一個或者多個js檔案
webpack vs gulp 區別
沒有可比性
模組打包機
前端自動化工具
1、全域性安裝webpack
cnpm install [email protected] -g
2、建立資料夾 初始化資料夾
npm init -y
3、區域性安裝webpack
cnpm install [email protected] --save-dev
4、建立 webpack.config.js
5、建立 src dist 資料夾
6、處理css的loader
cnpm install --save-dev style-loader css-loader sass-loader node-sass
7、處理js的loader
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
8、外掛
cnpm install html-webpack-plugin --save-dev
9、熱更新 伺服器
cnpm install [email protected] --save-dev