什么是Webpack-----模塊打包工具
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
1.webpack的安裝：
//全局安裝
npm install -g webpack
使用： webpack 入口文件名
//安裝到你的項目目錄
npm install --save-dev webpack
使用：npx webpack 入口文件名
2.webpack的配置文件
module.exports = {
entry: __dirname +"/app/main.js",//唯一入口文件
output: {
path: __dirname +"/public",//打包后的文件存放的地方
filename:"bundle.js"http://打包后輸出文件的文件名
????????????}
}
使用：npx webpack //配置好可以省略文件名
注：npx webpack --config webpack.config.js //修改了webpack.config.js 名稱時候，可以用該指令指定執(zhí)行的webpack配置文件，官方文檔描述：使用?--config?選項只是向你表明，可以傳遞任何名稱的配置文件。這對于需要拆分成多個文件的復雜配置是非常有用；
注：“__dirname”是node.js中的一個全局變量，它指向當前執(zhí)行腳本所在的目錄
3.更快捷的執(zhí)行打包任務
在package.json中對scripts對象進行相關設置
{
? "name": "vue-manage-system",
? "version": "3.1.0",
? "description": "基于Vue.js 2.x系列 + element-ui 內(nèi)容管理系統(tǒng)解決方案",
? "author": "lin-xin <2981207131@qq.com>",
? "private": true,
? "scripts": {
? ? "bundle":"webpack",// 可以使用?npm run bundle?命令，來替代我們之前使用的?npx?命令
? ? "build": "node build/build.js",
? ? "build:dll": "webpack --config build/webpack.dll.conf.js"
? }
}
使用：npm run bundle
4.運行webpack的方式：
@1:webpack index.js(全局)
@2:npx webpack index.js
@3:npm run bundle
5.做webpack打包時候，輸出的提示命令含義
Hash：本地打包對應的唯一hash值
version：本次打包使用的webpack版本
time：當前打包耗時
asset：打包出的文件名?
size：文件大小
chunks：復雜打包時候，其他打包js的id也會放在bundle.js的chunks字段中
chunks Names：同上，每個js文件對應的名字
entrypoint main = bundle.js? 對應的是配置中入口文件的名字
警告：webpack沒有配置打包環(huán)境和模式時候會報警告
默認的模式是：
mode:'production'//（代碼壓縮）webpack中配置，可選：development（代碼未壓縮）
6.使用loader打包靜態(tài)資源【圖片篇】,配置文件中進行配置
module: {
? ? rules: [{
? ? ? ? test：/\.jpg$/,
????????use:{
? ? ? ? ? ? loader:'file-loader'
????????????????}
????????????}]
}
以上配置代碼含義：打包模塊以jpg結(jié)尾的文件，使用file-loader來幫助我們做jpg文件的打包（若沒有則需要安裝npm install file-loader -D）
file-loader底層幫我們做的事情：
當他發(fā)現(xiàn)在代碼里引入圖片模塊時候，會把這個模塊，幫助打包移動到dist目錄下；
得到圖片（相對于dist目錄的）名稱，將名稱作為返回值，返回給我們引入模塊的變量之中；
7.loader是什么？
loader就是一個打包方案，知道對于某個特定文件，webpack該如何進行打包；
官方文檔定義，loader用于對模塊的源代碼進行轉(zhuǎn)換，可以使你在?import?或"加載"模塊時預處理文件，可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中?import?CSS文件！
通俗理解的話，就是，由于webpack不能識別非js結(jié)尾的模塊，所以通過loader使webpack識別出來（loader的作用）
如何配置loader：webpack.config.js中? 配置module-rules（符合的規(guī)則）
拓展：配置loader--在module-rules-options中進行配置
module: {
? ? rules: [{
????????????test：/\.jpg$/,
????????????use:{
????????????loader:'file-loader'，
? ? ? ? ? ? options:{
? ? ? ? ? ? ? ? ? ? ? ?name:'[name].[ext]'//占位符:原始名.后綴
? ? ? ? ? ? ? ? ? ? ? ? outputPath:'images/' //當我遇到jpg文件時候，打包時候?qū)⑵浯虬傻絛ist/images的文件夾里
????????????????????????}
????????????????}
????????????}]
}
8.使用loader
在你的應用程序中，有三種使用 loader 的方式（詳見官方文檔）：
配置（推薦）：在?webpack.config.js?文件中指定 loader。
內(nèi)聯(lián)：在每個?import?語句中顯式指定 loader。
CLI：在 shell 命令中指定它們。
9.使用loader打包靜態(tài)資源【圖片篇】，更多配置
url-loader可以實現(xiàn)file-loader所實現(xiàn)的一切功能
當使用url-loader會將圖片轉(zhuǎn)化成一個base64的字符串，然后直接放到js文件里，不是直接生成圖片
好處：省略http請求
缺點：圖片文件大的時候會影響加載速度
因此，可以對圖片的大小進行判斷，圖片較小時候放到js中，較大時候生成圖片，使用limit配置
module: {
? ? rules: [{
????????????test：/\.jpg$/,
????????????use:{
????????????loader:'file-loader'，
? ? ? ? ? ? options:{
????????????????????????name:'[name].[ext]'//占位符:原始名.后綴
????????????????????????outputPath:'images/' //當我遇到jpg文件時候，打包時候?qū)⑵浯虬傻絛ist/images的文件夾里????????
? ? ? ? ? ? ? ? ? ? ? ? limit：2048//圖片小于2048時候，圖片轉(zhuǎn)化成一個base64的字符串，放到js文件里，大于2048時候，生成圖片引入
????????????????????????}
????????????????}
????????????}]
}
10.使用loader打包靜態(tài)資源【樣式篇】
@1.需要用css-loader和style-loader配合使用
css-loader:? 分析出幾個css文件之間的關系，最終把這些css文件合并成一段css
style-loader: 在得到css-loader生成的內(nèi)容之后，會把這段內(nèi)容掛載到頁面的head部分
@2.使用less,scss,stylus等的時候，需要添加額外對應的loader來進行編譯
{
? ? ? ? test: /\.less$/,
? ??????loader: ['style-loader','css-loader','less-loader','postcss-loader']
? ? ? ? //或者loader: "style-loader!css-loader!less-loader"
? ? ? }
注：loader是有執(zhí)行順序的（從下到上，從右到左）
@3.postcss-loader: 自動添加廠商前綴；
使用postcss-loader需要目錄中創(chuàng)建postcss.config.js文件（詳見文檔）
配置如下：
module.exports = {
? "plugins": {
????????require('autoprefixer')//需要下載
? }
}
@4.補充：css配置項
imporeLoaders:2
作用：當less中再去@import less文件時候，webpack打包時候可能不會走postcss-loader和less-loader，而直接去走css-loader了，那么則需要用imporeLoaders去規(guī)定，通過import引入的less文件，在引入之前，也要去走2個loader；就會保證不管是在js直接引入less文件還是less中@import引入less文件都會執(zhí)行所有的loader
{
? ? ? ? test: /\.less$/,
????????loader: [
????????????'style-loader',
? ? ? ? ? ? {
? ? ? ? ? ? loader:'css-loader',
? ? ? ? ? ? options:{
? ? ? ? ? ? ? ? ? ? importLoaders:2
????????????????????}
????????????},
????????????'less-loader',
????????????'postcss-loader']
? ? ? }
@5.樣式模塊化:防止樣式耦合、沖突
在js中引入的less是全局的，因此可以使用模塊化css（即該css在特點的模塊內(nèi)有效）
配置options中的modules
{
? ? ? ? test: /\.less$/,
????????loader: [
????????????'style-loader',
? ? ? ? ? ? {
????????????loader:'css-loader',
? ? ? ? ? ? options:{
????????????????????importLoaders:2，
? ? ? ? ? ? ? ? ? ? modules:true,//
????????????????????}
????????????},
????????????'less-loader',
????????????'postcss-loader']
? ? ? }
使用：
import style from ‘ /css路徑’
img.classList.add(style.avatar)
11.使用loader打包靜態(tài)資源【字體篇】
file-loader 和 url-loader 可以接收并加載任何文件，然后將其輸出到構建目錄
字體配置使用file-loader 進行配置
12.使用 plugins 讓打包更便捷
1.安裝: npm install html-webpack-plugin -D
2.使用:var HtmlWebPackPlugin = require('html-webpack-plugin');//引入
3.在webpack.config.js中配置：plugins:[]
