-
什么是webpack?
依照官網(wǎng)上的話就是，本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。
簡(jiǎn)單理解：webpack 是前端的一個(gè)項(xiàng)目構(gòu)建工具，它是基于 Node.js 開(kāi)發(fā)出來(lái)的一個(gè)前端工具。
-
為什么要使用webpack?
1.模塊化開(kāi)發(fā)，簡(jiǎn)單明了（import export）
2.預(yù)處理器（Less,Sass...）
3.目前很多前端框架都支持（react,vue...）
注意：在開(kāi)始之前，必須確保安裝node的最新版本。
一、webpack安裝：
1.全局安裝：
npm install --gobal webpack
//不建議使用全局安裝，會(huì)使你使用webpack的所有項(xiàng)目都為規(guī)定的版本，不易使用
2.本地安裝
要安裝最新版本或者指定版本，請(qǐng)執(zhí)行以下命令：
此處說(shuō)明：--save-dev為將模塊安裝到本地項(xiàng)目中，并將模塊依賴寫入package文件中devDependencies 節(jié)點(diǎn)
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用的是webpack4+的版本，你還需要安裝cli
npm install --save-dev webpack-cli
二、webpack使用：
1.創(chuàng)建一個(gè)項(xiàng)目目錄并切換到此目錄路徑下：
mkdir webpack-demo
cd webpack-demo
2.初始化項(xiàng)目(目的：npm管理項(xiàng)目中的依賴包)：
npm init -y
//-y表示 初始化項(xiàng)目時(shí)條件依賴默認(rèn)選擇yes
3.本地安裝webpack，同時(shí)安裝webpack-cli工具：
npm install --save-dev webpack webpack-cli
4.創(chuàng)建項(xiàng)目目錄的基本結(jié)構(gòu)：
①創(chuàng)建兩個(gè)文件夾：
---src:源碼目錄
---dist:項(xiàng)目發(fā)布目錄
②在src文件夾中創(chuàng)建index.js文件，此文件為項(xiàng)目工程的入口文件。
③在dist文件夾中創(chuàng)建index.html文件：首頁(yè)。
④編寫代碼：
src/index.js
function component() {
var element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
dist/index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
5.以下操作完成后，運(yùn)行index.html會(huì)沒(méi)有任何效果，這時(shí)會(huì)有一個(gè)問(wèn)題：
6.使用webpack管理項(xiàng)目
①安裝loadsh
npm install --save loadsh
②修改代碼：在index.js導(dǎo)入loadsh
import _ from 'loadsh';
③使用webpack打包項(xiàng)目：
npx webpack
7.修改index.html中的引用，是一個(gè)基于使用打包好的main.js，是一個(gè)基于然后運(yùn)行程序
<script src="main.js"></script>
擴(kuò)展：
在 webpack 4 中，可以無(wú)須任何配置使用，默認(rèn)會(huì)將入口的index.js文件打包成main.js，然而大多數(shù)項(xiàng)目會(huì)需要很復(fù)雜的設(shè)置，這就是為什么 webpack 仍然要支持 [配置文件]，這比在終端(terminal)中手動(dòng)輸入大量命令要高效的多，所以讓我們創(chuàng)建一個(gè)取代以上使用 CLI 選項(xiàng)方式的配置文件：
①創(chuàng)建并編輯配置文件
項(xiàng)目目錄下創(chuàng)建 webpack-config.js文件，編寫配置：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
②執(zhí)行打包命令：
npx webpack --config webpack.config.js
以上內(nèi)容，可以完成小小的webpack 打包管理項(xiàng)目。喜歡可以點(diǎn)個(gè)贊哦！^ _ ^
