一.webpack
? ? 什么是webpack
? ? ? ?????webpack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用
????為什么用webpack
????????????a:模塊化，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;
????????????b:類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語(yǔ)言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識(shí)別；
????????????c:scss，less等CSS預(yù)處理器
????????????這些改進(jìn)確實(shí)大大的提高了我們的開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識(shí)別,而手動(dòng)處理又是非常繁瑣的，這就為Webpack類的工具的出現(xiàn)提供了需求。
二.webpack安裝
? ? ? ? 1.安裝webpack
? ? ? ? ? ? ? ? 安裝Node.js(Node.js 中文網(wǎng))
? ? ? ? ? ? ? ? 全局安裝webpack,webpack-cli,webpack-dev-server
? ? ? ? ? ? ? ? ? ? ? ? npm/cnpm install webpack webpack-cli webpack-dev-server -g
? ? ? ? ? ? ? ? 安裝完成
? ? ? ? ? 2.配置
? ? ? ? ? ? ? ? ? ?創(chuàng)建一個(gè)項(xiàng)目(webpack),項(xiàng)目中建立三個(gè)文件夾dist,src,config，并在dist文件中添加入口文件index.js，src文件中添加index.html
? ? ? ? ? ? ? ? ? ? ? ? dist:存放我們生產(chǎn)文件的地方
? ? ? ? ? ? ? ? ? ? ? ? src:我們的源文件夾
? ? ? ? ? ? ? ? ? ? ? ? config:配置文件文件夾
? ? ? ? ? ? ? ? ? ? Init一個(gè)package.json文件npm init -y
? ? ? ? ? ? ? ? ? ? ? ? 配置完成目錄如圖
? ? ? ? ? ? ? ? ? ? 3.打包
? ? ? ? ? ? ? ? ? ? ? ? ????????webpack --mode==devlopment
? ? ? ? ? ? ? ? ? ? ? ????? ????????--mode==devlopment是指環(huán)境為開發(fā)環(huán)境
? ? ? ? ? ? ? ? ? ? ? ? ????????????--mode==production
? ? ? ? ? ? ? ? ? ? ? ?????????????會(huì)生成一個(gè)node_modules文件如圖
三：webpack配置插件
? ? ? ? ? ? 1.在config文件中新建webpack.dev.js文件
? ? ? ? ? ? ?2.配置webpack.dev.js文件
? ? ? ? ? ? ? ? ? ? 如圖:
entry里的./src/main.js作為入口文件，需手動(dòng)創(chuàng)建
在main.js中操作index.html彈出webapck字段
同時(shí)本地安裝webpack webpack-cli以及webpack-dev-server如下兩圖
運(yùn)行：webpack-dev-server --config=config/webpack.dev.js
? ? ? ? ? ? 此時(shí)打開本地服務(wù)器配置的默認(rèn)端口8080,會(huì)出現(xiàn)如下圖所示效果，點(diǎn)擊dist文件會(huì)出現(xiàn)效果：
此時(shí)會(huì)發(fā)現(xiàn)，服務(wù)器路徑不是我們所想的訪問(wèn)8080即可彈出webpack字段
原因是因?yàn)闆]有配置本地服務(wù)器，沒有配置默認(rèn)路徑
? ? 下面來(lái)配置 本地服務(wù)器
配置過(guò)后重新打開，直接訪問(wèn)8080即可出現(xiàn)下圖效果
4.加載css以及配置package.json文件
????????????1.在src文件夾想下新建一個(gè)main.css，在css中設(shè)置body的背景色為pink,并在main.js中引入
? ? ? ? ? ? 2.安裝style-loader與css-loader? ?cnpm install css-loader style-loader
????????????????css-loader:解析css，遇到import的時(shí)候會(huì)引入相應(yīng)的文件，計(jì)算成css
????????????????style-loader：將計(jì)算的css放在style標(biāo)簽并放在head標(biāo)簽里
? ? ? ? ? ? 3.配置loader
????????????4.重新打包刷新；
五：配置package.json
????????當(dāng)我們使用vue腳手架搭建項(xiàng)目時(shí)，當(dāng)我們出現(xiàn)語(yǔ)法錯(cuò)誤時(shí)，控制臺(tái)以及瀏覽器會(huì)報(bào)錯(cuò)是為什么呢？
????????????原因是因?yàn)閣ebpack帶有控制臺(tái)默認(rèn)報(bào)錯(cuò)提示信息功能，若想在瀏覽器同時(shí)顯示報(bào)錯(cuò)信息需配置overlay
? ? ? ? ?1.配置overlay
? ? ? ? ? ? ? ? 在webpack.dev.js中的devServer中配置overlay
????????配置成功后，如有錯(cuò)誤，控制臺(tái)報(bào)錯(cuò)同時(shí)瀏覽器端也會(huì)報(bào)錯(cuò)
? ? ? ? ? ?2.配置啟動(dòng)命令與打包命令
? ? ? ? ? ? ? ? ? ? 啟動(dòng)命令? webpack-dev-server --config=config/webpack.dev.js
? ? ? ? ? ? ? ? ? ? 打包命令? webpack --config=config-config/webpack.dev.js
? ? ? ? ? ? ? ? ? ? 我們會(huì)發(fā)現(xiàn)，webpack自帶的啟動(dòng)與打包命令郭偉繁瑣，如果簡(jiǎn)單化
? ? ? ? ? ? ? ? ????我們需要配置package.json文件。在package.json文件中我們發(fā)現(xiàn)有script這個(gè)配置項(xiàng)如圖
? ? ? ? ? ? ? ? ????我們刪除test配置項(xiàng)并配置如圖所示啟動(dòng)與打包命令
????????????????????????執(zhí)行命令后發(fā)現(xiàn)：
