webpack4入門筆記——概覽

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-05
Web筆記

webpack是什麼

一種自動流程構建工具，簡單的說就是幫你零散的程式碼打包起來，官網圖鎮樓

webpack4入門筆記——概覽

but，眾所周知，webpack配置繁瑣難以記憶，入門不易，手腳架遍地。

核心概念

配置太多眼花繚亂，主要抓住最基本4個概念

  • 入口(entry)
  • 出口(output)
  • loader
  • 外掛(plugins)

入口

你要打包哪個檔案，webpack會把這個檔案的相關依賴也打包進去（比如各種import進來的檔案）

出口

打包後的檔案叫啥名字，放在哪

loader

webpack本身只打包js，使用loader可以打包其他程式碼、檔案（比如css，圖片等）

外掛

可以是第三方外掛，webpack的強大之處，一些其他任務處理（比如程式碼壓縮，去註釋等）

安裝（window）

因為電腦已安裝過webpack2.6，所以實際安裝可能有出入，如有錯誤，歡迎指正

  1. 安裝好node環境，安裝cnpm，開啟cmd

  2. 安裝webpack

  • 全域性安裝 cnpm install -g webpack

  • 本地安裝，進入專案目錄 cnpm install --save-dev webpack

  1. 安裝webpack-cli

  • 全域性安裝 cnpm install -g webpack-cli

  • 本地安裝，進入專案目錄 cnpm install --save-dev -D webpack-cli

配置檔案

配置方式一：開發和生成不分離

webpack所有配置都配置在webpack.config.js檔案中。

在專案中建立配置檔案，並加入程式碼：

module.exports={
	//待加入配置項
}
複製程式碼

配置方式二：開發和生成分離

1 . 新加三個檔案：基礎配置檔案、開發時配置檔案、生產時配置檔案

webpack.base.conf.js 基礎配置檔案

webpack.dev.conf.js 開發時配置檔案

webpack.prod.conf.js 生產時配置檔案

2 . 配置 開發 & 生產 2個指令碼

//package.json
"scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.conf.js",
    "build": "webpack --config webpack.prod.conf.js"
}
複製程式碼

相關文章