Webpack介紹
webpack是一款前端模塊化打包工具夷蚊，通過webpack能夠方便地對項目所依賴的模塊、資源(圖片、CSS弯蚜、JS)進(jìn)行打包輸出。
webpack官網(wǎng)：Webpack
Webpack使用文檔：Webpack文檔
Webpack安裝使用
1.使用npm安裝webpack剃法，不了解npm可以看一下我之前的文章NPM
//打開終端碎捺，cd到項目的目錄下
npm init //初始化,需要設(shè)置相關(guān)參數(shù)，可一直默認(rèn)
//npm init -y 加上參數(shù)-y可以直接默認(rèn)初始化
//目錄下多了一個package.json文件贷洲，這是npm的配置文件
//接著安裝webpack
npm install webpack --save-dev
//安裝完成后目錄下多了個module文件夾收厨，這是webpack所依賴的一些module模塊
//后續(xù)添加進(jìn)來的模塊也存放在這個文件夾下
//--save-dev參數(shù)這里先埋個坑
Webpack實踐
隱式依賴：
index.html:
//在沒有使用webpack之前，我們的項目可能有這樣的關(guān)系
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
index.js:
//index.js文件中依賴html文件中引入的jQuery
$(document).ready(function(){
$('body').html("Hello,jQuery");
});
上面代碼存在著隱式依賴优构，如果依賴項丟失或者加載的順序不當(dāng)诵叁，程序就會執(zhí)行錯誤。再者钦椭，如果一些引入的js實際上并沒有使用拧额，同時也導(dǎo)致頁面的HTTP請求數(shù)量增加，頁面加載速度變慢彪腔。
試試Webpack
//安裝jQuery
//npm install jquery --save
//這里的安裝參數(shù)是--save
填坑--save-dev 和 --save
--save-dev是指將包信息添加在devDependencies侥锦，就是開發(fā)時所依賴的包
--save是指將包信息添加在Dependencies中，就是項目發(fā)布時所依賴的包
//修改之前的index.js文件
var $ = require('jquery');
$(document).ready(function(){
$('body').html("Hello,Webpack");
});
利用webpack打包js文件：
//webpack 打包入口文件 打包輸出文件
webpack index.js dist/bundle.js
修改index.html文件：
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="dist/index.js"></script>
</body>
</html>
多模塊依賴
假設(shè)我們上面的index.js文件又依賴于另一個data.js文件德挣，那么我們這里就要用到模塊化恭垦。
//index.js文件
var $ = require('jquery');
var str = require('data.js');
$(document).ready(function(){
$('body').html(str);
});
data.js:
var str = "Hello,Webpack";
module.exports = str;
運行webpack命令再次進(jìn)行打包，在瀏覽器中就可以看到效果格嗅。
這里我們僅是利用了webpack對js的簡單打包番挺，如果我們的項目比較復(fù)雜，要打包js屯掖、css玄柏、圖片等等資源，那就要用到webpack.config.js配置文件來統(tǒng)一管理懂扼。
下一篇文章介紹webpack.config.js的配置禁荸，請留意。
