一，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-clinpm 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官網查詢