脫離腳手架來配置、學習 webpack4.x （一）基礎搭建項目

序

如今依舊記得第一次看到webpack3.x 版本配置時候的狀態  剛開始看到這些真的是一臉懵。但願這篇文章能幫到剛開始入門的同窗。

 

webpack 是什麼？

webpack是一個模塊化打包工具，webpack 經過入口分析項目結構，找到JavaScript模塊以及一些不能直接在瀏覽器上運行的語言、語法等 如（scss、ts、es6+等），並將其打包成能夠直接在瀏覽器運行的js，以及壓縮、加密、按需加載等。

相關概念

• Entry：入口，webpack執行構建的第一步將從Entry開始，可理解爲輸入 
• Module：模塊，在webpacl中一切皆爲模塊，一個模塊對應一個文件，webpack會從配置的Entry開始遞歸找出全部依賴的模塊
• Chunk：代碼塊，一個chunk由多個模塊組合而成，用於將代碼合併和分割 
• Loader：模塊轉換器，用於把模塊原內容按照需求轉換爲須要的新內容 
• Plugin：擴展插件，在webpack構建流程中的特定時機注入擴展邏輯來改變構建結果和想要作的事情 
• Output：輸入結果，在webpack通過一系列處理並獲得最終想要的代碼而後輸出結果
• runTime：在瀏覽器運行時，鏈接模塊的鏈接器
• manifest：webpack 編譯時記錄全部模塊的詳細信息的數據集合（鏈接器來這裏查詢具體的模塊）

 環境搭建

一、先用npm初始化一個項目，獲得 package.json 文件

1 npm init -y 或者
2 npm init // 這個要填寫一些信息 如 名稱 郵箱 版本 等等

 

二、安裝webpack 4 將CLI 獨立出來了，因此須要安裝兩個包

1  npm install webpack webpack-cli -D

 webpack-cli 我以爲全局安裝比較方便，命令行全局安裝不會形成版本衝突之類的。根據官網的api，如今咱們能夠進行打包了。

可是爲了更加方便的打包咱們須要用到npm script 功能（簡單的說就是臨時把node_modules 路徑加到系統環境變量）。

先創建好相關文件如 webpack.config.js

在package.json  scripts 中加入

1 "build:dev": "webpack --mode development"

 

在webpack.config.js 中導出一個最簡單的對象給webpack

 1 'use strict'
 2 const path = require('path')
 3 
 4 // path
 5 function resolve (dir) {
 6   return path.join(__dirname, dir)
 7 }
 8 
 9 module.exports = {
10   mode: 'development',
11   entry: {
12     app: './main.js'
13   },
14   output: {
15     filename: '[name]-[hash].js',
16     path: path.resolve(__dirname, 'dist'),
17     publicPath: './'
18   }
19 
20 }

在窗口執行 

1 npm run build:dev

不出問題，應該是打包成功了。

源碼

   https://github.com/ben-Run/webpack-learn 

   要是幫到你了能夠點下star， 哈哈~~~