webpack是一個打包工具，用來打包各種類型的文件。核心是依賴和模塊，webpack會把所有資源都看成模塊來進行模塊化開發，通過webpack可以更好的管理各模塊間的依賴。
環境准備
webpack依賴於node環境，安裝完node之后也自然有包管理工具npm了
進入node項目中初始化node項目 npm init => 創建package.json文件
package.json文件用於管理node項目中npm安裝的包
webpack的安裝 （安裝webpack前先確認是否有安裝nodejs）
全局安裝：npm i webpack –g
項目內安裝：
開發依賴安裝 npm i –D webpack
如果要安裝開發環境的webpack服務的話還要安裝webpack-dev-sever => 熱更新頁面
npm i –D webpack-dev-sever
這樣package.json里的devDependencies會多兩個key:value
這里的版本是不確定版本
想看實際的版本可以在package-lock.json中找
package.json文件的配置
通過 webpack 要打包的文件路徑名 打包后的文件路徑名 來進行文件打包
eq：webpack ./index.js ./js/bounle.js
這里的webpack命令用的是全局安裝的webpack，怎樣才能用項目中安裝的webpack呢？、
這就需要我們配置package.json文件中的scrpit屬性
"build": "webpack"
"dev": "webpack-dev-server"
這樣就能通過 npm run build 命令來打包代碼
但是這里的命令並沒有指明文件位置呀？這時候就要配置我們的webpack.config.js了
webpack.config.js文件配置
先來看看webpack.config.js里面有什么需要配置的
可以看到主要配置的有：entry,output,module,resolve,plugins,watch,devServer
entry和output
entry:'./src/index.js',//定義入口文件
output:{//定義出口文件
//用path模塊里的resolve動態獲取文件的絕對路徑
path:path.resolve(__dirname,'./dist'),
filename:'bundle.js'
//由於index.html存在於src下，需要把html中的資源路徑指向dist文件夾（加載html打包插件后可以刪除）
//,publicPath:'./dist'
}
可以看出這兩個是配置出口文件和入口文件的
到這里應該清楚了為什么前面的package.json里沒有指定文件了，因為執行webpack時會找到項目中局部安裝的webpack模塊，模塊又會自動找到項目根路徑中的webpack.config.js文件，讀取里面的配置找到要打包的文件和要輸出的文件的路徑位置。
用npm run請注意：如果項目中有安裝webpack則調用項目的webpack，否則用的是全局安裝的webpack
這里要注意的是配置出口文件的格式：
要應用nodejs自帶的path模塊來動態獲取文件的絕對路徑
module
module中有個規則rules數組
rules用來配置webpack打包文件時對應的規則，里面傳入多個規則對象
配置css規則 => 讀到css文件時應該怎么處理
要安裝對應的加載器 'style-loader','css-loader' 通過開發依賴安裝 npm i –D
同理配置下面多個規則
配置scss規則 => 讀到scss文件時應該怎么處理
安裝'style-loader','css-loader','sass-loader',’node-sass’ 通過開發依賴安裝 npm i –D
配置圖片規則 => 讀到圖片文件時應該怎么處理
安裝'url-loader','file-loader' 通過開發依賴安裝 npm i –D
options中定義了限制小於8kb時用'url-loader'，大於時會默認加載'file-loader'，並且如果通過'file-loader'打包時圖片應該怎樣命名 。這里配置了圖片會放進img文件夾，在原來名字后面加上8為hash值，並保持原來的擴展名
用’url-loader'會把圖片轉成base64位字符串來傳輸，大於時直接把圖片資源一起打包進disk文件夾內，到時用到圖片則直接通過路徑訪問disk中的靜態文件夾static
配置babel規則 => 讀到js文件時應該怎么處理
安裝"babel-core""babel-loader""babel-preset-env" 通過開發依賴安裝 npm i –D
配置vue組件規則 => 讀到vue組件文件時應該怎么處理
安裝"vue-loader""vue-template-compiler" 通過開發依賴安裝 npm i –D
這里配置后還要解決vue文件的指向問題，為啥？
如果你的main.js入口文件里new vue實例是通過組件的話，那就說明你的項目運行要依賴
Runtime+Compiler而vue-loader自動加載的版本是runtimeonly版，runtimeonly版識別不了
網頁上template這東西，所以需要給vue-loader重定向
怎么重定向？這里就要配置resolve了
resolve
resolve里有個alias對象，通過這個對象可以起別名，當webpack找到與這些別名相同的字符時就會進行重定向，這里面就是重定向了以vue為結尾的文件，將其指向有編譯器的vue.esm.js中
重定向在項目開發的資源路徑問題上也有巨大的幫助
@符號在vue腳手架3中默認指向了src目錄 common中放置公用的js
asset中放置公用的圖片和樣式文件 components中放置組件 views中放置頁面視圖
public中放置靜態資源 => 大量圖片 json數據文件 音頻 視頻等
plugins
這里面配置的是webpack打包插件
這里面配置了一個html文件打包的插件 用於把inde.html一起打包進disk中
這之前要記得先安裝插件"html-webpack-plugin" 通過開發依賴安裝 npm i –D
"uglifyjs-webpack-plugin"這個是用來壓縮js代碼的插件
watch
設置watch:true 時每次文件被更改保存后，都會自動執行npm run build來打包編譯
devServer
devServer用來配置webpack-dev-sever服務
這里補充一下webpack-dev-sever的資料
啟動webpack-dev-sever后，服務器會在contentBase的url位置啟動服務，並在內存中打開boundle.js,之后每次代碼修改后都會被映射到內存中的這個boundle.js中，但這並不會修改到正真的boundle.js，所有的操作只是在內存的級別上，並無保存進磁盤。
想要服務器默認打開瀏覽器可以在package.json中配置"dev": "webpack-dev-server –open”
配置分離的處理
因為開發環境和生產環境是分開的 （其實就是開發調試時和最后的編譯需要的東西是不一樣的沒必要放在一個配置文件中）
於是把webpack.config.js分成了3部分
開發配置文件dev.config.js
生產配置文件pro.config.js
要完成分離是需要一個第三方模塊支持'webpack-merge'，於是必須先安裝它
'webpack-merge'被用來合並配置文件，具體方法參見圖片。
最后還必須重新指定配置文件的位置，我們可以回到package.config.js通過命令行來指定
這樣使用npm run 命令后webpack就會重定向配置文件的位置，原本默認是會去根目錄找webpack.config.js的文件
日志補充 2019-10-23
上述內容使用的是webpack3.6版本
在webpack4.0后，webpack打包shell命令，與webpack模塊本身分離，若要使用打包命令
還需安裝webpack-cli => npm i –D webpack-cli
特性：約定大於配置，減少配置代碼
新增配置屬性mode（必選）
