webpack是什麼
1.模組化
2.自定義檔案或npm install(整個專案完成後,可以將整個專案進行模組化,模組化分為兩種,一是自定義的檔案(自己建立的css檔案或者js檔案),而是引用的檔案(比如bootstrap或者angular))
3.靜態檔案模組化(比如css檔案)
4.借助於外掛程式和載入器
webpack的優勢:
1.**分離
2.裝載器(css,sass,jsx等)
3.智慧型解析(require(「路徑」))
安裝流程
在全域性安裝webpack,開啟終端,輸入 npm install -g webpack
安裝完成後,新建乙個資料夾,在終端進入這個資料夾
輸入命令 npm init (初始化)
輸入後,顯示name:version:description:(等等一些屬性)
webpack的主要應用:
1.使用第三方軟體
2.模組化靜態檔案(css)
3.使用配置檔案webpack.config.js
4.使用webpack-dev-serve(在當前環境下搭建乙個伺服器,然後執行專案)
5.使用babel轉換外掛程式(將es6的語法轉換為es5)
將資料夾放到程式設計軟體中,在資料夾的內部新建乙個檔案為 index.html
進入新建的內部資料夾
最後資料夾的結構:
在webpack.config.js檔案中,需要進行設定
在 package.json中進行設定:
在src/js/people.js中
最後在index.html檔案中,只引入打包好的檔案
在終端輸入命令
npm run bulid
npm start
打包就完成了(輸入的build 和start 是根據你package.json檔案中scripts中的設定,名字可以隨便改)
webpack打包工具
終端執行 yarn webpack或者 在package.json中加入 scripts 開發模式 yarn webpack mode development原始模式 yarn webpack mode none在webpack.config.js中增加mode的模式 mode developmen...
webpack打包工具
目的 平時小專案中例如一些 需要進行打包壓縮,用這個工具可以進行打包壓縮,就可以上傳到伺服器。使用方法 1,引進需要打包的專案,把入口html替換掉專案中的index.html,把引進的js,css都放在src裡面對應的資料夾裡面 2,npm install 3,進行webpack.config.j...
Webpack打包工具詳解
webpack是一種前端資源構建工具 乙個靜態模組打包器 在webpack看來 前端所有資源檔案都會作為模組處理 他將根據模組的依賴關係進行靜態分析 打包生成對應的靜態資源 webpack 可以做到按需載入。像 grunt gulp 這類構建工具,打包的思路是 遍歷原始檔 匹配規則 打包,這個過程中...