什么是webpack?
webpack是一個模塊管理工具妻味，用webpack可以管理模塊依賴，并編譯模塊所需的靜態(tài)文件欣福。它可以很好的管理打包開發(fā)中用到的html责球、css、js以及靜態(tài)文件（圖片拓劝，字體）雏逾，使開發(fā)更有效率。
webpack對不同的類型資源郑临，有對應(yīng)的模塊加載器（loader）栖博。
webpack模塊打包器會分析模塊間的依賴關(guān)系，最后生成優(yōu)化且合并后的靜態(tài)資源厢洞。
webpack是以CommonJs規(guī)范書寫代碼仇让，但是對CMD/AMD也支持。
webpack工作流程：
1.通過entry配置入口文件犀变；（如果多個入口文件妹孙，用對象形式表示）
2.通過output配置出口文件；
entry:'./src/index.js',//入口
output:{//出口
filename:'bundle.js',//打包后的文件名
//filename:'bundle.[hash:8].js', //如果希望文件每次生成的新的不一樣文件 也可以加hash戳 在中間加入[hash] ：8的意思是只顯示8位
path:path.resolve('build'),//路徑必須是一個絕對路徑
},
3.使用各種loader處理css获枝、js蠢正、image等資源，并將它們編譯與打包成瀏覽器可以解析的內(nèi)容省店。
安裝webpack
- 安裝本地的webpack
- npm init (先初始化)
- npm install wepack webpack-cli -D //-D是 --save-dev縮寫
webpack可以進(jìn)行0配置
打包工具->輸出后的結(jié)果（js模塊）
打包src文件夾下的
npx webpack
打包后會出現(xiàn)一個dist文件
打包（支持我們JS 的模塊化）
手動配置webpack
- 默認(rèn)配置文件的名字是 webpack.config.js
- 如果更改配置文件的名字 如webpack.config.my.js
- 運(yùn)行命令行為 npx webpack --config webpack.config.my.js -D
需要在package.json文件增加scripts嚣崭，里面放入build
"scripts": {
"build": "webpack --config xxx",(xxx為新的名字)
}, - 運(yùn)行命令行為 npm run build
- 如果把build里面 名字去掉 只留下webpack笨触，此時運(yùn)行 npm run build -- --config xxx （中間--不要省略 否則會報錯）
開發(fā)時想用ip地址來訪問，webpack內(nèi)置了一個開發(fā)服務(wù)雹舀，是通過express實現(xiàn)了一個靜態(tài)服務(wù)芦劣。
npm install webpack-dev-server -D
執(zhí)行 npx webpack-dev-server
也可以配置packge.json 中scripts
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},執(zhí)行命令行 npm run dev
(好處是并不會真是的打包文件，而是在生成的內(nèi)存中打包)-
如果想在當(dāng)前目錄下執(zhí)行说榆，需要在webpack.config.js里進(jìn)行配置
devServer:{//開發(fā)服務(wù)器的配置
port:3000,//設(shè)置的端口號
progress:true,//是否有進(jìn)度條
contentBase:'./build',//指定的目錄名運(yùn)行
compress:true//啟動UglifyJsPlugin壓縮
},
想要自動建立html 然后打包在內(nèi)存中虚吟，就需要插件 html-webpack-plugin
- 運(yùn)動命令行 npm install html-webpack-plugin -D
- 然后在webpack.config.js進(jìn)行配置
plugins:[//是一個數(shù)組，放著所有的webpack插件
new HtmlWebpackPlugin({//自動生成打包后的HTML模板插件類
template:"./src/index.html",//模板
filename:'index.html',
minify:{//壓縮html文件
removeAttributeQuotes:true,//刪除雙引號
collapseWhitespace:true//壓縮成一行
},
hash:true, //插入的js文件帶hash戳,為了緩存問題
})
]
(記住每次先npm run build打包 然后在npm run dev運(yùn)行)
處理css
在js里引入css模塊签财，需要把css變成模塊然后在js中引入 需要合適的loader解析文件
npm install css-loader style-loader -D
css-loader 是解析
也可以處理less文件 sass stylus node-sass sass-loader stylus stylus-loader
配置webpack.config.js
module:{
rules:[//規(guī)則解析
//css-loader解析@import這種語法
//style-loader 是將css插入到head標(biāo)簽中
//loader的特點串慰，希望單一
//loader的用法，字符串只用一個loader,如果多個loader需要[]
//loader的順序是 默認(rèn)從右向左執(zhí)行,從下到上執(zhí)行
//loader可以寫成對象方式
{test:/\.css$/,use:
[
{
loader:'style-loader',
options:{//配置指向
insertAt:'top'//讓css插入在最上面
}
},
'css-loader'
]
},//匹配正則唱蒸，配置后綴為.css的文件
//可以處理less文件 sass stylus node-sass sass-loader stylus stylus-loader
{test:/\.less$/,use:
[
{
loader:'style-loader',
},
'css-loader',
'less-loader'//把less=》css
]
}
]
}//配置模塊
如果把css抽離 用link標(biāo)簽插入需要插件 mini-css-extract-plugin
- npm install mini-css-extract-plugin -D
css樣式自動加前綴 需要安裝插件 postcss-loader
npm install postcss-loader antuprefixer -D
在webpack.config.js的配置模塊里 加入‘postcss-loader’
需要創(chuàng)建一個postcss.config.js的配置文件
module.exports = {
plugins:[require('autoprefixer')]
}
壓縮css文件邦鲫，需要安裝插件 optimize-css-assets-webpack-plugin
let OptCssAssets=require('optimize-css-assets-webpack-plugin');//壓縮css文件
module.exports = {
optimization:{//優(yōu)化項
minimizer:[
new OptCssAssets()
]
},
}
將高級語法轉(zhuǎn)換成es5
es6轉(zhuǎn)換成es5 安裝babel
- 需要安裝轉(zhuǎn)換loader babel-loader @babel/core @babel/preset-env
- 運(yùn)行命令行 npm install babel-loader @babel/core @babel/preset-env -D
- 配置webpack.config.js，在module里的rules配置規(guī)則
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{//用babel-loader需要把es6轉(zhuǎn)換成es5
presets:[//預(yù)設(shè)
'@babel/preset-env'
]
}
}
},
如果出現(xiàn)es7語法神汹，class類 需要安裝@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
- 在轉(zhuǎn)換 ES2015 語法為 ECMAScript 5 的語法時庆捺，babel 會需要一些輔助函數(shù)，例如 _extend屁魏。babel 默認(rèn)會將這些輔助函數(shù)內(nèi)聯(lián)到每一個 js 文件里滔以，這樣文件多的時候，項目就會很大蚁堤。
- babel 提供了 transform-runtime 來將這些輔助函數(shù)“搬”到一個單獨的模塊 babel-runtime 中醉者，這樣做能減小項目文件的大小。
Polyfill提供的就是一個這樣功能的補(bǔ)充披诗，實現(xiàn)了Array撬即、Object等上的新方法，實現(xiàn)了Promise呈队、Symbol這樣的新Class等
