一,webpack的認識
一直用vue腳架自動生成項目,但其他最主要的webpack是怎麼搭建的,怎麼編譯 怎麼構建 估計很少人會去關注,做個webpack的記錄和見解,我們先通過一個圖片來認識webpack;
這個圖片基本就把webpack的功能介紹出來了
- 能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作爲模塊來使用和處理,
- 能有Grunt或Gulp所有基本功能 比如打包、壓縮混淆、圖片轉base64等。將less。sass編譯成css文件;
- 解決大型項目初始化加載慢的問題,能夠在大型項目中運用
- 每一個靜態文件都可以看成一個模塊
- 可以整合第三方庫
- 可以通過node在瀏覽器裏直接運行
二.使用webpack
-
安裝webpack配置 npm init 初始化生成
package.json
文件 需要你填寫相關項目的信息 而通過npm init -y 可以生成一個默認的 -
npm install -g webpack 全局安裝webpack
-
npm init npm install webpack --save 通過npm把webpack的依賴導入項目中
-
4.x
的版本把cli分離出來了,所以必需安裝webpack-cli
npm install --save-dev webpack-cli 或者 npm install -D webpack-cli -
驗證是否安裝成功:webpack -v,如果出現下面報錯
執行一下 npm install -g webpack-cli
就可以了 現在我們就可以開始玩起來了。
三.配置文件的認識
webpack
的工作都是通過配置文件完成的。編譯哪個文件、怎麼編譯、編譯成什麼樣、輸出爲什麼等等,所有的操作都是按配置文件裏的內容來完成的,webapck
想要運行的話配置文件是必不可少的東西。通常我們都是在webpack.config.js文件進行配置,採用CommonJS
的規範,用moudle.exports
導出
配置文件有6個核心的東西組成
entry
:入口文件(就跟頁面的index,從什麼地方開始)output
:出口文件(這個就是告訴要把這些東西放到什麼地方去)module
:模塊(放lorder,編譯瀏覽器不認識的東西,一些第三方的控件,比如壓縮,sass)plugins
:插件(輔助開發,提高開發效率,)devServer
:服務器(webpack提供的本地服務器 可以直接本地修改映射到瀏覽器 同步更新 而不用在按刷新)mode
:模式,分爲開發模式、生產模式。此爲4.X裏新增的
四. 小測試
創建一個小demo,目錄結構如下
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
//js/index.js
window.onload = ()=>{
const box = document.querySelector('.box');
box.innerHTML = '1231231';
}
//webpack.config.js
const path = require('path'); //nodejs的語法,引入路徑模塊,爲了輸出的時候找絕對路徑
module.exports = {
entry: './js/index.js', //入口文件爲main.js
output: { //輸出
path: path.resolve(__dirname, 'dist'), //path.resolve爲nodejs的固定語法,用於找到當前文件的絕對路徑
filename: 'bundle.js' //輸出的文件名
},
}
對應的代碼如上圖 ,打開命令窗口 執行 webpack 會自動去查找 webpack.config.js文件,執行裏面的配置
如果執行了webpack報錯 先執行一下 npm i --save-dev webpack,在重新執行webpack
在目錄我們可以看到一個新的文件夾 dist
引入的話可以看到爲我們剛纔在index.js寫的效果是一樣的
這個就是最簡單的webpack運行
五.語法糖和步驟
官網文檔 https://www.webpackjs.com/concepts/entry-points/
- 入口文件 entry: string|Array<string>| {[entryChunkName: string]: string|Array<string>},
- 只打包一個文件(單入口),寫個字符串
- 把多個文件打包成一個文件,寫個數組
- 把多個文件分別打包成多個文件,寫成對象
webpack
把打包後的文件叫Chunck
- 出口文件 output 配置
output
選項可以控制 webpack 如何向硬盤寫入編譯文件。注意,即使可以存在多個入口
起點,但只指定一個輸出
配置filename
用於輸出文件的文件名。字符串- 目標輸出目錄
path
的絕對路徑。__dirname
是nodejs
裏的一個模塊,表示當前文件的絕對路徑 通過引入path模塊 通過resolve來定義絕對路徑path.resolve(__dirname,'輸出文件的路徑')
;
六.多文件
目錄的話 就是在JS文件夾裏多添加了一個文件two.js文件
數組形式 :
可以看出webpack
會把數組裏所有文件打包成一個js文件
對象格式
webpack
會把對象裏的文件分別打包成多個文件
更加詳情的配置請到webpack官網查詢