webpack已經(jīng)更新到了版本4率碾，關(guān)于版本的問題谴供，相信很多小伙伴們?cè)趯W(xué)習(xí)的時(shí)候碰到好多坑框喳，本篇文章是基于webpack2的教程進(jìn)行學(xué)習(xí)的唇兑，但是盡可能的使用webpack4的語(yǔ)法學(xué)習(xí)，于是不免出現(xiàn)紕漏纺涤，或者出現(xiàn)混雜译暂，如有問題，請(qǐng)及時(shí)解決撩炊。
10.1前端工程化與webpack
通常外永，前端自動(dòng)化（半自動(dòng)化）工程主要解決以下問題：
- javaScript CSS代碼的合并與壓縮
- CSS預(yù)處理：Less、Sass拧咳、Stylus的編譯
- 生成雪碧圖（CSS Sprite）
- ES6轉(zhuǎn)ES5
- 模塊化
……
如果熟悉Gulp伯顶，我們知道經(jīng)過(guò)Gulp合并壓縮后的代碼仍然是你寫的代碼，只是局部變量名被替換骆膝，一些語(yǔ)法做了轉(zhuǎn)換而已祭衩，整體內(nèi)容并沒有發(fā)生變化。而我們要學(xué)習(xí)的webpack阅签，打包后的代碼已經(jīng)不只是你寫的代碼了掐暮，其中夾雜了很多webpack自身的模塊處理代碼。因此愉择，webpack最難的是理解“編譯”這個(gè)概念劫乱。
在webpack的世界里织中，一張圖片锥涕、一個(gè)css甚至一個(gè)字體衷戈，都成為模塊（Module），彼此存在依賴關(guān)系层坠，webpack就是來(lái)處理模塊間的依賴關(guān)系的殖妇，并把它們進(jìn)行打包。
webpack的主要適用場(chǎng)景是單頁(yè)面富應(yīng)用（SPA)破花。SPA通常是由一個(gè)html文件和一堆按需加載的.js組成谦趣，它的html結(jié)構(gòu)可能會(huì)非常簡(jiǎn)單。
在進(jìn)行webpack的學(xué)習(xí)之前座每，我們先來(lái)學(xué)習(xí)兩個(gè)ES6中的語(yǔ)法：export和import前鹅。
export和import是用來(lái)導(dǎo)入和導(dǎo)出模塊的，一個(gè)模塊就是一個(gè)js文件峭梳，他擁有獨(dú)立的作用域舰绘，里面定義的變量外部是無(wú)法訪問的，因此需要使用export導(dǎo)出葱椭。
模板導(dǎo)出后捂寿，在需要使用模塊的文件使用import導(dǎo)入。
export與import海洋其他的用法孵运，這里不做詳細(xì)介紹秦陋。
10.2 webpack基礎(chǔ)配置
10.2.1 安裝webpack、webpack-cli與webpack-dev-server
在安裝webpack前治笨，先確保已經(jīng)安裝了最新版的Node.js和NPM驳概，并且了解NPM的一些基本用法。
- 首先旷赖，創(chuàng)建一個(gè)目錄顺又，比如demo，使用NPM初始化配置杠愧。
npm init
- 執(zhí)行后待榔，會(huì)有一系列選項(xiàng)，可按回車鍵快速確認(rèn) 流济，完成后會(huì)在demo目錄生成一個(gè)package.json的文件锐锣。之后在本地局部安裝webpack：
npm install webpack --save-dev
- --save-dev會(huì)作為開發(fā)依賴來(lái)安裝webpack。安裝成功后绳瘟，在package.json中會(huì)多一項(xiàng)配置：
"dependencies": {
"webpack": "^4.17.2"
}
4.接著需要安裝webpack-dev-server雕憔，它可以在開發(fā)環(huán)境中提供很多服務(wù)，比如啟動(dòng)一個(gè)服務(wù)器糖声、熱更新斤彼、接口代理等分瘦，配置起來(lái)也很簡(jiǎn)單。同樣琉苇，在本地局部安裝：
npm install webpack webpack-dev-server --save-dev
安裝完成后嘲玫，最終的package.json文件內(nèi)容為：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.2",
"webpack-dev-server": "^3.1.7"
}
}
10.2.2就是一個(gè)js文件而已
接下來(lái)需要了解webpack的一些核心概念。
歸根到底并扇，webpack就是一個(gè).js文件去团，你的架構(gòu)好或差都體現(xiàn)在這個(gè)配置上，隨著需求的不斷出現(xiàn)穷蛹，工程配置也是逐漸完善土陪。
1.首先，我們?cè)谀夸汥EMO下創(chuàng)建一個(gè)js文件：webpack.config.js肴熏，并初始化它的內(nèi)容：
var config= {
//這里的module.exports相當(dāng)于export default config.由于目前還沒安裝支持ES6的編譯插件鬼雀，因此不能直接使用ES6的語(yǔ)法。
};
module.exports=config;
2.然后在package.json的scripts里增加一個(gè)快速啟動(dòng)webpack-dev-server服務(wù)的腳本：
{
//……
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --config webpack.config.js"
},
//……
TIPS:由于我們這里安裝的是webpack4蛙吏，所有這里需要安裝webpack-cli源哩，才可以繼續(xù)下一步，但是這里學(xué)習(xí)的是webpack2出刷，所以我們不作為一個(gè)步驟璧疗，安裝webpack4的小伙伴，繼續(xù)在命令行中執(zhí)行：npm install webpack-cli
3.當(dāng)運(yùn)行npm run dev命令時(shí)馁龟，就會(huì)執(zhí)行webpack-dev-server --open --config webpack.config.js命令崩侠。其中，--config是指向webpack-dev-server讀取的配置文件路徑.
--open會(huì)在執(zhí)行命令時(shí)自動(dòng)在瀏覽器打開頁(yè)面坷檩，默認(rèn)地址是127.0.0.1：8080,不過(guò)IP和端口都是可以配置的却音，比如：
{
//……
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --host 192.168.199.102 --port 8888
--open --config webpack.config.js"
},
//……
webpack配置中組主要的也是必選的兩項(xiàng)是入口（Entry）和出口（Output）。入口的作用是告訴webpack從哪里開始尋找依賴矢炼，并且編譯系瓢，出口則是用來(lái)配置編譯后的文件存儲(chǔ)位置和文件名。
在demo目錄下新建一個(gè)空的main.js作為入口的文件句灌，然后再webpack.config.js中進(jìn)行入口和輸出的配置(webpack4的配置)：
const path=require('path'); //nodejs的語(yǔ)法夷陋，引入路徑模塊，為了輸出的時(shí)候找絕對(duì)路徑
module.exports={
entry:'./src/main.js', //入口文件為main.js
output:{ //輸出
path:path.resolve(__dirname,'dist'), //path.resolve為nodejs的固定語(yǔ)法胰锌，用于找到當(dāng)前文件的絕對(duì)路徑
filename:'bundle.js' //輸出的文件名
},
};
在終端里執(zhí)行命令webpack后骗绕，不出意外的話終端里顯示如下就表示成功了
同時(shí)看一下文件結(jié)構(gòu)目錄，多了一個(gè)dist文件夾资昧，以及bundle.js文件酬土。這兩個(gè)就是webpack打包生成的文件，如下：
在index.html文件里引入bundle.js文件后格带，用瀏覽器打開index.html（或者執(zhí)行完webpack后撤缴，執(zhí)行npm run dev刹枉，然后打開IP地址），可以看到頁(yè)面里有內(nèi)容了屈呕。這就代表我們已經(jīng)使用webpack打包了一個(gè)文件微宝，它的基本用法已經(jīng)跑了。
<body>
<div id="box"></div>
<script src="dist/bundle.js"></script>
</body>
這里一定要注意引用的bundle.js一定要在div下面引用凉袱，如果在<head>中引用逾一，會(huì)報(bào)錯(cuò)诸狭！
10.2.3語(yǔ)法及步驟
語(yǔ)法
一.
entry入口文件
只打包一個(gè)文件（單入口），寫個(gè)字符串
把多個(gè)文件打包成一個(gè)文件辆憔，寫個(gè)數(shù)組
把多個(gè)文件分別打包成多個(gè)文件钉稍，寫成對(duì)象
webpack把打包后的文件叫Chunck
二.output出口文件
1.filename輸出文件的名稱
①涤躲、輸出一個(gè)文件，寫個(gè)字符串
②贡未、輸出多個(gè)文件种樱，文件名前面加個(gè)標(biāo)識(shí)符（id/name/hash）
2.path輸出文件的路徑
①、路徑必需為絕對(duì)路徑
②俊卤、__dirname是nodejs里的一個(gè)模塊嫩挤，表示當(dāng)前文件的絕對(duì)路徑
③、path為nodejs的系統(tǒng)模塊消恍，直接引入后調(diào)用path.resolve(__dirname,'輸出文件的路徑');
步驟
當(dāng)我們?cè)诮K端里輸入webpack命令的時(shí)候webpack會(huì)按以下的步驟開始工作
1.先打開根目錄下的
webpack.config.js
2.找entry（入口）屬性的值
3.進(jìn)入到main.js里岂昭，看到它又依賴show.js，再找到show.js
4.把main.js與show.js合并成一個(gè)js文件
5.在webpack.config.js里找到output（出口）屬性
6.解析output里的path與filename屬性的值
7.把第4步合并成的js文件放到dist文件夾里狠怨，并起個(gè)名字叫bundle.js
10.2.4 Plugin
下面就以這個(gè)html-webpack-plugin插件為例约啊，給大家演示插件的用法。這個(gè)插件的作用是用來(lái)自動(dòng)生成html頁(yè)面佣赖，既可以生成單個(gè)頁(yè)面又可以生成多個(gè)頁(yè)面恰矩，并且在生成前你可以給它一堆的配置，它會(huì)按照你想要的生成方式去生成頁(yè)面憎蛤。
第一步：安裝
npm i html-webpack-plugin -D
第二步：在webpack.config.js里引入模塊
const HtmlWebpackPlugin=require('html-webpack-plugin');
第三步：在plugins里new一個(gè)
plugins:[
new HtmlWebpackPlugin()
]
此時(shí)webpack.config.js的內(nèi)容如下：
const path=require('path'); //nodejs的語(yǔ)法外傅，引入路徑模塊，為了輸出的時(shí)候找絕對(duì)路徑
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //入口文件為main.js
output:{ //輸出
path:path.resolve(__dirname,'dist'), //path.resolve為nodejs的固定語(yǔ)法俩檬，用于找到當(dāng)前文件的絕對(duì)路徑
filename:'bundle.js' //輸出的文件名
},
plugins:[
new HtmlWebpackPlugin()
]
};
第四步：在終端里執(zhí)行命令webpack萎胰，如果不出意外的話是下面這樣：
未完待續(xù)，明天我們接著來(lái)webpack豆胸！
