[ webpack4 ] 配置屬於自己的打包系統教程（一）—— 基礎配置篇

yhtx1997發表於2019-01-03
Web

GitHub 完整配置檔案地址： https://github.com/yhtx1997/webpack4-Instance

由於篇幅過長分三次釋出，建議按順序看

基礎配置篇

主要內容

  • 安裝 webpack4
  • 目錄初始化
  • 配置初始化
  • 入口及多入口配置
  • 出口配置

安裝 webpack4

安裝 webpack 前請確保已安裝 nodejs 和 npm

新建 npm 專案

npm init -y
複製程式碼

這裡的init表示初始化一個 npm 專案， -y 表示全部選 yes，不加的話會提示輸入一些專案資訊，比如專案名，版本號，作者...

安裝 webpack4

npm install webpack webpack-cli webpack-dev-server -D
複製程式碼

這其實是一條合併的命令，拆開就是

npm install webpack -D
npm install webpack-cli -D
npm install webpack-dev-server -D
複製程式碼
  • install 是安裝的意思； -D 表示安裝到本地開發環境，不使用全域性安裝是因為每個專案可能用的 webpack 版本不一樣導致衝突
  • 第一條安裝的是 webpack 的核心檔案，就好比是安裝包
  • 第二條是讓 webpack 支援類似 npm run dev 這種命令列命令
  • 第三條安裝的是可以使 webpack 支援實時編譯的擴充包

初始化 npm 配置及檔案

現階段的目標是讓它能執行起來
現在目錄下應該有一個資料夾，兩個 .josn 檔案

初始目錄

  • node_modules 用來存放所有安裝的 npm 包
  • package.json 在這裡配置 npm run 的指令碼，以及包含專案資訊，安裝了哪些包
  • package-lock 詳細的包的版本來源，確保專案所有開發人員用的都是一個版本

調整 package.json

官方推薦移除檔案中的入口配置，這樣可以防止意外發布你的程式碼。

"main": "index.js"
複製程式碼

並加上私有屬性配置

"private": true
複製程式碼

執行webpack 可以用在命令列輸入 npx webpack
但是這樣的執行方式在配置了開發環境和生產環境時，再執行需要寫很多引數
所以新增一個 npm 指令碼,之後執行 輸入 npm run test 即可，有引數後在後邊追加即可

 "test": "webpack"
複製程式碼

最後看起來像這樣

初始package

新建入口檔案及生成出口檔案

在 webpack 4 中，可以無須任何配置使用，做完上邊的操作後可以在命令列輸入 npm run test 執行 webpack（這裡的 test 是在上邊 scripts 裡自己定義的），但是會顯示這樣的結果。

圖片描述

這是因為入口檔案不存在，webpack 預設是將當前目錄下的 ./src/index.js 當做要打包的檔案（入口），新建一下 src 目錄和 index.js 檔案，就可以正常了。

clipboard.png

這時會生成一個 dist 目錄以及目錄裡有一個 main.js，這是預設的打包好的檔案及目錄（出口），這樣一個 webpack 算是初始化完成了。

clipboard.png
clipboard.png

注：

  • 最終釋出時如果只需要一個 js，那麼開發時 index.js 裡推薦是隻用來引入其他 js 檔案（import）。
  • 在截止 2018年12月31日 據我所知道的目前 import 和 export 還只是概念上的標準， js 還不能原生支援 import 和 export ，大家能使用是因為配置了 babel ，通過 babel 進行編譯，使其變成 node.js 的程式碼，使其可以將這條命令視為載入模組。 nodejs 採用 CommonJS規範，關於 ES6 這方面的可以看 ES6 Module 的語法。

webpack4 入口出口配置

在上面也說了 webpack4 現在可以無需使用任何配置檔案就可以使用，但是有些東西還是弄成自己喜歡的比較好

新建配置檔案

在當前目錄下新建一個 webpack.config.js 檔案，並寫入程式碼

const path = require('path');//[1]

module.exports = {
    //[2]
};
複製程式碼
  • 1 是引入 node 的 path 模組，這樣就可以處理檔案與目錄的路徑，處理路徑是因為 windows 系列和 Linux 系列在路徑的表示上不太一樣。
  • 2 是對外暴露大括號 {} 中的內容，用來寫我們自定義的配置
  • 注：關於配置檔名，wepack4 預設是會引入 ./webpack.config.js ，如果想自己改名字的話可以在命令列輸入一下程式碼，其中 webpack --config 是必須的， my.config.js 是自己自定義的配置檔案的路徑
webpack --config my.config.js
複製程式碼

入口配置

為了能證明入口確實改了有效果，我將 ./src/index.js 的檔名改為 2048.js，並放到./src/js/2048.js ； 並修改程式碼

const path = require('path');

module.exports = {
    entry: "./src/2048.js"//add
};
複製程式碼

在不加上面程式碼時會報之前的找不到入口的錯誤，加了以後會顯示正常輸出了，並且 ./dis 下會多一個 2048.js 的檔案，

clipboard.png

多入口配置

entry 不光能賦值絕對路徑的字串，還能賦值多個路徑的陣列或物件

entry: './src/2048.js'//單入口 字串傳參

entry: ['./src/js/2048.js','./src/js/1024.js','./src/js/512.js']//多入口 陣列傳參

entry: {//多入口 物件傳參
    2048: './src/js/2048.js',
    1024: './src/js/1024.js',
    512: './src/js/512.js'
  }
複製程式碼

出口配置

出口跟入口不太一樣，入口可以有很多，但是隻有一個輸出配置。

output: {
    filename: '2048.js',
    path: 'C:/Users/GengShaojing/Desktop/2048/dist'
}
複製程式碼
  • filename 打包後檔案的檔名。
  • path 打包後檔案的的絕對路徑。

多入口多輸出檔案

output: {
    filename: '[name].js',//[1]
    path: path.resolve(__dirname, 'dist')//[2]
}
複製程式碼
  • 1 [name] 表示使用 entry 傳遞過來的檔案的檔名或者物件的 key 值
  • 2 __dirname 指向當前檔案（webpack 配置檔案）的絕對路徑， path.resolve 是解析路徑並在路徑後加上 dist
每次修改後生成不一樣的檔名
output: {
    filename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, 'dist')
}
複製程式碼

filename 支援以下幾個屬性，且可以共存

  • [name] 模組名稱 就是之前說的檔名或者物件的 key 值

  • [id] 模組識別符號 應該是入口傳入順序的下標值從 0 開始

  • [hash] 模組識別符號的雜湊值 這個我理解的不太清楚，只知道他可以生成字串

  • [chunkhash] 內容的雜湊值 根據內容生成字串

  • [contenthash] 提取的內容生成的雜湊值 根據提取的內容生成字串

  • 注：官方推薦 [name] 加上 [chunkhash] 的模式

  • 注：雜湊值就是用演算法提取的標識資訊，相當於人和錄入指紋，雜湊值就是人錄入指紋的機器，最後的字串就是指紋

相關文章