概述
Webpack是一個(gè)模塊打包器篓跛，它能根據(jù)模塊的依賴關(guān)系遞歸的構(gòu)建一個(gè)依賴關(guān)系圖，當(dāng)中包含了應(yīng)用程序需要的所有模塊坦刀，最后打包成一個(gè)或者多個(gè)bundle愧沟。簡(jiǎn)單來說，就是將你的javascript編譯成一個(gè)或多個(gè)文件鲤遥。
創(chuàng)建項(xiàng)目和安裝webpack
npm init -y
npm install -g webpack webpack-cli --save-dev
package.json
package.json文件存放了項(xiàng)目的基本信息（包括名稱沐寺、版本，開發(fā)者盖奈、入口）以及第三方依賴包混坞。無(wú)論任何時(shí)候，你安裝一個(gè)新的包钢坦，包名和版本會(huì)添加到package.json文件中拔第。package-lock.json包含了你項(xiàng)目的整個(gè)依賴樹，包含了間接的依賴信息场钉。package-lock.json還包括了每個(gè)模塊具體的版本信息。
還可以在package.json中配置打包命令懈涛，如下所示：
“build”:”webpack --mode=production”
配置
webpack.config.js是webpack默認(rèn)使用配置文件逛万，也是大多開發(fā)者使用的配置文件。但可以在package.json中定義自己的配置文件批钠。
Webpack4約定了默認(rèn)的配置宇植，可以實(shí)現(xiàn)零配置。
入口（entry）
entry用來指引Webpack應(yīng)該從哪個(gè)模塊開始埋心，它是構(gòu)建的入口指郁。之后Webpack會(huì)自動(dòng)找出應(yīng)用內(nèi)其他相互依賴的內(nèi)容進(jìn)行打包。默認(rèn)配置如下：
model.exports={
entry:'./src/index.js'
}
出口（output）
定義Webpack所構(gòu)建的bundle在哪里輸出拷呆，默認(rèn)的輸出路徑是dist/main.js闲坎。
Loaders和Plugins
Loaders和plugins是webpack的核心。常用的Loaders和plugins如下：
- Babel-loader
- css-loader
- sass-loader
- postcss-loader
- style-loader
- url-loader
- file-loader
- MiniCssExtractPlugin
Webpack DevServer
Webpack為我們提供了一個(gè)隨時(shí)可用的開發(fā)web服務(wù)器茬斧，它將幫助我們大幅縮短編譯時(shí)間腰懂，為我們提供一個(gè)HTTP URL來訪問HTML頁(yè)面（而不是文件協(xié)議），甚至可以在JavaScript项秉、CSS等發(fā)生變化時(shí)重新編譯打包并重新加載頁(yè)面绣溜。
安裝
$ npm install --save-dev webpack-dev-server
配置
module.exports = {
devServer: {
port: 9000,
contentBase: path.resolve(__dirname, ' build' )
},
// ...
}
