模組打包工具webpack的使用

2021-08-08 06:33:02 字數 1391 閱讀 4659

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 這類構建工具,打包的思路是 遍歷原始檔 匹配規則 打包,這個過程中...