前言：根據(jù)視頻和webpack官網(wǎng)文檔加上自己得實(shí)踐理解做的學(xué)習(xí)筆記骑歹，視頻地址：https://www.bilibili.com/video/av51693431?from=search&seid=11643137955182440094
一仑嗅、webpack是什么
簡(jiǎn)單來說拐云，webpack可以看作是一個(gè)模塊打包機(jī)，通過入口文件按照各個(gè)文件之間的依賴關(guān)系打包成靜態(tài)資源（像js充蓝、css、圖片等）。
webpack可以做什么呢
代碼轉(zhuǎn)換（比如es6轉(zhuǎn)es5）横腿、文件優(yōu)化、代碼分離斤寂、模塊合并耿焊、自動(dòng)刷新、代碼校驗(yàn)遍搞、自動(dòng)發(fā)布等罗侯。詳見https://www.webpackjs.com/concepts/
廢話不多說，趕緊來看看怎么用吧溪猿！
二钩杰、體驗(yàn)一下零配置
1、npm init 初始化一個(gè)項(xiàng)目再愈。
2榜苫、本地安裝(不建議全局安裝，全局安裝會(huì)因版本不同引發(fā)許多問題)
npm install --save-dev webpack webpack-cli
3翎冲、根目錄下新建一個(gè)src文件夾垂睬，src下建一個(gè)index.js文件。現(xiàn)在的目錄結(jié)構(gòu)是這樣的：
文章一開始說webpack是一個(gè)模塊打包機(jī)抗悍，那先來體驗(yàn)一下它的打包功能驹饺。
我們?cè)趇ndex.js里寫一句話:
console.log('hello webpack!')然后執(zhí)行以下命行進(jìn)行打包（注：
npx是npm 5.2新增）npx webpack 看一下有什么變化
執(zhí)行完
npx webpack后發(fā)現(xiàn)多了一個(gè)dist文件夾，dist文件夾下有一個(gè)main.js缴渊，里面的代碼已經(jīng)被打包壓縮了赏壹。再仔細(xì)一看，我index.js文件只寫了一句話衔沼，打包后卻多了這么多代碼蝌借，這是為什么呢昔瞧？原因就是webpack在打包時(shí)會(huì)自動(dòng)進(jìn)行模塊化。
既然webpack在打包時(shí)會(huì)自動(dòng)進(jìn)行模塊化菩佑，那么我們就來寫一個(gè)模塊看看自晰。
在src下新建一個(gè)a.js，用
module.exports導(dǎo)出稍坯，然后在index.jsrequire進(jìn)來：a.js:
module.exports = 'hello webpack from a.js'
index.js:
let str = require('./a.js')
console.log(str)
然后命令行再執(zhí)行 npx webpack進(jìn)行打包酬荞，結(jié)果發(fā)現(xiàn)有一個(gè)叫mode的東西，mode是webpack4新增的一個(gè)配置瞧哟，叫做“模式”混巧，默認(rèn)為production(生產(chǎn)模式)，還可以是development(開發(fā)模式),development模式不會(huì)壓縮代碼勤揩，更容易閱讀一些咧党。
如果你想用
npm run build來執(zhí)行得話，只需要在package.json里配置一下script腳本即可陨亡。比如這樣：
"scripts": {
"build": "webpack --config webpack.config.js"
}
當(dāng)然build是自己起得名字凿傅，你也可以起其他的名字。
我們暫時(shí)在dist目錄下手動(dòng)創(chuàng)建一個(gè)index.html,并將打包后的main.js引入（自動(dòng)生成html后面再說）:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
將index.html在瀏覽器中打開缨历，控制臺(tái)里就可以看到有‘hello webpack from a.js’了粥血。
零配置是很弱的，復(fù)雜一點(diǎn)的要求，還需要手動(dòng)配置粤蝎。
三、手動(dòng)配置webpack
默認(rèn)配置文件名：webpack.config.js（采用node語法來寫）,在根目錄下新建一個(gè)webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.[hash].js', //默認(rèn)為main.js
path: path.resolve(__dirname,'./dist') //path為絕對(duì)路徑乏盐，用node path模塊轉(zhuǎn)化
},
mode: 'development' //開發(fā)模式
}
[hash]是為了避免js緩存這樣每次修改都會(huì)產(chǎn)生一個(gè)文件造成冗余什乙，可以安裝clean-webpack-plugin來清楚上個(gè)版本：
npm i clean-webpack-plugin -D
webpack.config.js里引入
const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins:[ //存放插件
new CleanWebpackPlugin()
]
此時(shí)的webpack.config.js:
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.[hash].js', //默認(rèn)為main.js [hash]是為了避免js緩存
path: path.resolve(__dirname,'./dist') //path為絕對(duì)路徑，用node path模塊轉(zhuǎn)化
},
mode: 'development', //開發(fā)模式
plugins:[ //存放插件
new CleanWebpackPlugin(['./dist'])
]
}
刪除dist文件夾燎悍，再運(yùn)行一下npm run build敬惦，你會(huì)發(fā)現(xiàn)dist文件夾下打包出了一個(gè)build.js,里面的內(nèi)容和默認(rèn)的生產(chǎn)模式打包出來的內(nèi)容有所不同，此時(shí)打包出來的代碼體積比較大了但更易于閱讀了谈山。
這時(shí)再在dist目錄下新建一個(gè)index.html并引入打包好的build.js,在瀏覽器中打開俄删，控制臺(tái)里依然可以看到正確輸出。
但每次都手動(dòng)添加html文件太麻煩了奏路，能不能打包的時(shí)候自動(dòng)生成呢畴椰？
html-webpack-plugin插件就可以實(shí)現(xiàn)了
打包自動(dòng)生成html
1、首先進(jìn)行安裝
npm i html-webpack-plugin -D
2鸽粉、src下新建html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
</body>
</html>
3斜脂、webpack.config.js里引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
4、webpack.config.js plugins模塊添加HtmlWebpackPlugin
plugins:[ //存放插件
new HtmlWebpackPlugin({
template: './src/index.html', //模板
filename: 'index.html', //默認(rèn)也是index.html
minify: {
removeAttributeQuotes: true, //刪除標(biāo)簽屬性的雙引號(hào)
collapseInlineTagWhitespace: true, //打包成一行
},
hash: true, //增加hash触机，避免緩存
}),
new CleanWebpackPlugin(['./dist'])
]
此時(shí)刪掉dist文件夾再執(zhí)行npm run build進(jìn)行打包帚戳，完了會(huì)發(fā)現(xiàn)dist文件夾下已經(jīng)生成了index.html并且自動(dòng)引入了bundle.js玷或。此時(shí)在瀏覽器打開index.html，控制臺(tái)依然可以看到正常輸出片任。
每次都在文件中打開html偏友，這樣有點(diǎn)low，那么我們來配置一個(gè)本地服務(wù)器吧蚂踊！
配置本地開發(fā)服務(wù)器
1约谈、還是先安裝
npm i webpack-dev-server -D
我們還需要在webpack.config.js中配置一下devServer。
devServer:{ //開發(fā)服務(wù)器配置
port: 3000, //端口號(hào)
progress: true, //進(jìn)度條
contentBase: './dist', //服務(wù)默認(rèn)指向文件夾
open: true //自動(dòng)打開瀏覽器
}
啟動(dòng)這個(gè)服務(wù)可以通過npx webpack-dev-server,也可以在package.json scripts腳本配置：
"dev": "webpack-dev-server"
這樣把npm run dev作為啟動(dòng)開發(fā)環(huán)境犁钟。
目前scripts下配置了兩個(gè)腳本
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
}
運(yùn)行npm run dev,則自動(dòng)在瀏覽器打開了一個(gè)服務(wù)棱诱。打開控制臺(tái)還是可以看到正常的輸出。
webpack默認(rèn)只支持js涝动，那我想把css也打包怎么辦迈勋？請(qǐng)看下一篇webpack4系列第二篇
