前端小白韭畸，第一次寫博文笛质，也算理理自己的理論炼邀，有錯(cuò)請(qǐng)指教陆错，各位大佬勿噴蟹蟹?('ω')?
@[TOC]
一阶剑、安裝配置webpack
1.webpack的定義
webpack是什么？官方文檔的定義：
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。
我理解的webpack做的事情是：它先找到你打包開(kāi)始的入口文件(entry)兔朦，然后根據(jù)你入口文件中的依賴關(guān)系（一大堆的導(dǎo)入導(dǎo)出渲染等）偷线，順藤摸瓜的把所有文件打包到一個(gè)出口文件中(output)。
2.webpcak的安裝
那么沽甥，怎么安裝webpack呢声邦？
webpack安裝：在命令行輸入
npm install webpack webpack-cli -g
=>這里我是用的是全局安裝webpack（代碼中的-g 即 --globle），之前我在其他項(xiàng)目底下使用局部安裝摆舟，結(jié)果在其他項(xiàng)目目錄下要使用webpack頻頻出錯(cuò)（一直提示我安裝webpack-cli）亥曹，官方文檔推薦使用本地安裝（指路官方文檔），為了方便使用我直接全局安裝恨诱，如果有誰(shuí)碰到和我一樣的問(wèn)題（小白笑哭）媳瞪，指路這位大佬的博文-->webpack坑系列--安裝webpack-clit，講的很清楚了蟹蟹
安裝好出現(xiàn)這個(gè)：
webpack -v和webpack-cli -v查看webpack版本蛇受，如果出現(xiàn)版本號(hào)就說(shuō)明安裝成功了（如下）。
3.webpack的配置
webpack的配置都在webpack配置文件中厕鹃，即我們自己要先在根目錄中創(chuàng)建一個(gè)配置文件webpack.config.js兢仰。
在package.json中配置webpack運(yùn)行命令
為了運(yùn)行方便乍丈，我們?cè)?code>package.json文件中找到scripts節(jié)點(diǎn)，作如下修改：
scripts:{
"dev":"webpack"
}
這個(gè)意思是在命令行用npm run dev命令就可以開(kāi)始打包了把将！
入口文件配置(entry)
入口文件就是指你打包開(kāi)始的主文件轻专，默認(rèn)值為./src，也可以自己設(shè)置入口文件秸弛。
就我而言铭若，我打包的入口文件是app.js，因?yàn)檫@是我項(xiàng)目的主文件递览，也是我所有依賴關(guān)系開(kāi)始的主文件叼屠。
webpack.config.js
modules.export = {
entry:'./app.js'
}
出口文件配置(output)
入口文件都可以配置了，出口文件當(dāng)然也可以绞铃。它在output中配置镜雨，默認(rèn)出口文件為./dist/bundle.js。如若要自己配置儿捧，如下：
webpack.config.js
modules.export = {
entry:'./dist/vue-bundle.js'
}
意思是打包到dist文件夾里的vue-bundle.js文件里荚坞。
webpack的模式(mode)
webpack模式有兩種，即development和production菲盾，兩種模式打包出來(lái)的文件略微有些差別颓影，后者被壓縮得更小。開(kāi)發(fā)階段推薦使用development懒鉴，上市階段再使用production诡挂。
指定開(kāi)發(fā)模式，在webpack.config.js文件中添加如下節(jié)點(diǎn)：
module.exports = {
mode:'development' //意思是用開(kāi)發(fā)模式打包文件
}
二临谱、各種類型文件打包
這里要說(shuō)一下璃俗，webpack打包只能自動(dòng)打包js文件，其他的非js文件是沒(méi)法自動(dòng)打包的悉默，因此城豁，我們需要添加對(duì)應(yīng)文件的loader。實(shí)際上抄课，loader起到的作用是：將對(duì)應(yīng)的文件類型轉(zhuǎn)為可處理的有效模塊唱星，然后再由webpack進(jìn)行處理。
1跟磨、打包c(diǎn)ss文件
第一步魏颓，安裝style-loader css-loader，在命令行這樣寫：
npm install style-loader css-loader -d
沒(méi)有出現(xiàn)ERR就說(shuō)明沒(méi)有問(wèn)題吱晒。
第二步甸饱，在webpack.config.js里面添加如下節(jié)點(diǎn)：
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
=>這里要解釋一下：rules是所有第三方模塊的匹配規(guī)則，它的值是一個(gè)數(shù)組，數(shù)組的元素是一個(gè)對(duì)象叹话，每個(gè)對(duì)象都相應(yīng)匹配一個(gè)第三方模塊的規(guī)則偷遗。注意！Ｍ蘸氏豌！每個(gè)對(duì)象都至少包括兩個(gè)屬性，test和useＨ劝肌１么！test指要匹配的文件后綴般妙，use指對(duì)應(yīng)的第三方模塊loader(就是你剛才安裝的的loader啦纪铺！)
2、打包處理less
第一步碟渺，安裝less-loader：
npm install less less-loader -d
第二步就在webpack.config.js中這樣寫：
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
3鲜锚、打包處理sass
第一步，安裝less-loader：
npm install sass-loader node-sass -d
第二步就在webpack.config.js中這樣寫：
module:{
rules:[
{test:/\.sass$/,use:['style-loader','css-loader','sass-loader']}
]
}
4苫拍、打包處理和url路徑有關(guān)的文件（圖片文件等）
第一步芜繁，安裝url-loader：
npm install url-loader file-loader -d
第二步就在webpack.config.js中這樣寫：
module:{
rules:[
{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use:'url-loader?limit = 16940'
}
]
}
=>注意,這里的limit是用來(lái)限制文件大小的。
三绒极、關(guān)于工具和插件(plugins)
目前僅用過(guò)2個(gè)工具或者是插件骏令，后續(xù)有用到其他再補(bǔ)充~
1.實(shí)現(xiàn)webpack自動(dòng)打包功能（工具）
為什么要實(shí)現(xiàn)自動(dòng)打包功能？方便垄提。在程序打包完成后榔袋，出于一些原因，我們又要對(duì)程序進(jìn)行修改塔淤，修改后我們又要重新在命令行運(yùn)行npm run dev命令來(lái)打包項(xiàng)目。好吧速妖，這只是修改一次高蜂，如果修改很多次代碼呢？繼續(xù)打包罕容？我就問(wèn)你煩不煩备恤？
自動(dòng)的打包的好處就在這里，當(dāng)你運(yùn)行一次npm run dev后锦秒，后續(xù)代碼如果有再修改露泊，他會(huì)幫你自動(dòng)打包而不需要你手動(dòng)打包。那么旅择，怎么實(shí)現(xiàn)呢惭笑？
第一步，在命令行安裝自動(dòng)打包工具webpack-dev-server：
npm install webpack-dev-server
第二步，修改package.json -> scripts節(jié)點(diǎn)的dev 如下：
"scripts":{
"dev" : "webpack-dev-server"
}
第三步沉噩，命令行運(yùn)行命令npm run dev即可捺宗。
2.實(shí)現(xiàn)打包完成即時(shí)生成預(yù)覽頁(yè)面（插件）
這個(gè)插件能實(shí)現(xiàn)在打包完成的一瞬間即時(shí)生成預(yù)覽頁(yè)面。
第一步川蒙，在命令行運(yùn)行如下命令蚜厉，安裝自動(dòng)生成預(yù)覽頁(yè)面插件html-webpack-plugin：
npm install html-webpack-plugin
第二步，在webpack.config.js文件中添加如下配置信息：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlPlugin = new HtmlWebpackPlugin({ //獲取插件實(shí)例對(duì)象
template:'./src/index.html', //要自動(dòng)打開(kāi)的文件路徑
filename:'index.html' //生成的文件名稱畜眨，該文件存在于內(nèi)存中昼牛，其實(shí)是看不到的
});
第三步，添加插件節(jié)點(diǎn)信息：
modules.export = {
plugins:[HtmlPlugin] //plugins屬性值為一個(gè)數(shù)組康聂，包含了打包過(guò)程中會(huì)用到的插件
}
第四步贰健，這一步主要是配置一些打包的其他信息。打開(kāi)package.json文件早抠，在其中找到scripts結(jié)點(diǎn)霎烙，作如下改動(dòng)：
//--open 打包完成后自動(dòng)打開(kāi)瀏覽器頁(yè)面
//--host 配置IP地址
//--port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
然后就可以啦！
目前先寫到這里蕊连，如果還有其他后續(xù)再補(bǔ)充悬垃，謝謝看到這里的小伙伴啦！
