webpack4系列實踐筆記

1.webpack 是什麼？

webpack 是目前 javascript 主流的工程自動構建工具，目前 Vue，React 以及 Angular 等項目腳手架都是基於 webpack 進行構建的。

webpack 官方中文文檔：www.webpackjs.com/concepts/

webpack 官方英文文檔：webpack.js.org/concepts

2.webpack 須要安裝的環境

webpack 須要安裝的環境有：

• webpack
• webpack-cli

安裝的方式有兩種：

• 項目本地安裝( npm install webpack webpack-cli )

  運行方法:

  .\node_modules\.bin\webpack .\index.js
  複製代碼

• 全局安裝( npm install webpack webpack-cli -g )

  運行方法:

  webpack .\index.js
  複製代碼

不理解本地安裝和全局安裝? 擼一遍npm的文檔? www.npmjs.cn/

爲了不每一個demo都在本地安裝一遍 webpack 和 webpack-cli ，這裏推薦使用全局安裝的方式。

注意：有一些 webpack plugin 是依賴於 webpack 或 webpack-cli 的，好比 mini-css-extract-plugin, html-webpack-plugin 或 webpack-dev-server 等 ,這種狀況須要本地安裝 webpack: npm install webpack ,但編譯環境依然能夠使用全局 webpack 命令來進行編譯打包（前提是你的本地 webpack 和全局的 webpack 版本兼容）。

3.個人webpack版本

webpack: v4.29.5

webpack-cli: 3.2.3

本 webpack4 系列的實踐 demo 都是基於此版本進行的

4.關於安裝webpack

3.1 首先安裝 nodejs ,安裝成功後，會自帶 npm 管理器

3.2 安裝 webpack

npm install -g webpack webpack-cli
複製代碼

3.2 查看當前 webpack 版本號

webpack -v
複製代碼

5.demo list

demo01: 最簡單的 webpack 零配置實踐

demo02: 使用 webpack.config.js 配置文件

demo03: webpack 默認支持各類模塊化規範

demo04: webpack + babel7

demo05: webpack + typescript

demo06: webpack + babel7 + typescript

demo07: 自動生成 Html 文件

demo08: 關於 SplitChunksPlugin

demo09: 使用 SplitChunksPlugin 分離第三方依賴包以及異步包

demo10: 關於 Tree Shaking

demo11: webpack 處理 css

demo12: webpack 處理 scss

demo13: webpack經過postcss-loader加工css和scss

demo14: mini-css-extract-plugin + SplitChunksPlugin 處理 css 和 scss

demo15: webpack 處理圖片

demo16: webpack 處理字體

demo17: demo17 clean-webpack-plugin (清除模式)

demo18: webpack-dev-server (開發模式)

demo19: webpack 開發模式和生產模式

6.源碼地址

github.com/SimpleCodeC…

7.關於做者

• GitHub: github.com/SimpleCodeC…
• 我的博客: www.cxdsimple.com
• 我的線上簡歷: www.cxdsimple.com/cv/
• Email: 248200851@qq.com