1.什么是WebPack，為什么要使用它？
- 模塊化，讓我們可以把復雜的程序細化為小的文件;
- Scss，less等CSS預處理器
- 類似于TypeScript 以及 react Jsx 種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識別；
- 這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。
2.什么是Webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
3.Webpack的工作方式
把你的項目當做一個整體，通過一個給定的主文件（如：main.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders(特殊語法加載處理器)處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
image.png
4.開始使用Webpack
- nodejs環境
- 全局安裝webpack
npm install webpack -g
- 新建個webpackTest目錄，cmd到當前目錄
- 初始化個package,json文件 會提示輸入一堆brief enter跳過就行
npm init
image.png
- 當前目錄下安裝webpack
npm install --save-dev webpack
//--save-dev會在packjosn中注入webpack devDependencies
image.png
何用？
//直接在新文件夾下拉入一個配置好的package,json
npm install
------會把devDependencies所有的依賴模塊給你安裝好。
5.來個簡單的demo展示下
自行新建文件目錄如下
image.png
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>public_index</title>
</head>
<body>
<div id="test">
</div>
<script src="build.js"></script>
</body>
</html>
- mian.js
var greeter = require('./greet.js');
document.getElementById('test').appendChild(greeter());
- greet.js
module.exports = function () {
var greet = document.createElement('div');
greet.innerHTML = "Hi greetings!";
return greet;
};
- 執行打包命令行
node webapp/main.js public/build.js
image.png
image.png
