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

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"
複製代碼

最後看起來像這樣

新建入口文件及生成出口文件

在 webpack 4 中，能夠無須任何配置使用，作完上邊的操做後能夠在命令行輸入 npm run test 運行 webpack（這裏的 test 是在上邊 scripts 裏本身定義的），可是會顯示這樣的結果。

這是由於入口文件不存在，webpack 默認是將當前目錄下的 ./src/index.js 當作要打包的文件（入口），新建一下 src 目錄和 index.js 文件，就能夠正常了。

這時會生成一個 dist 目錄以及目錄裏有一個 main.js，這是默認的打包好的文件及目錄（出口），這樣一個 webpack 算是初始化完成了。

注：

• 最終發佈時若是隻須要一個 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 的文件，

多入口配置

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] 的模式

• 注：哈希值就是用算法提取的標識信息，至關於人和錄入指紋，哈希值就是人錄入指紋的機器，最後的字符串就是指紋