1. webpack 安裝
-安裝本地的webpack
-webpack webpack-cli -D （項(xiàng)目上線時(shí)不需要）
1.初始化項(xiàng)目目錄： yarn init -y
- 安裝
yarn add webpack webpack-cli -D
webpack 可以進(jìn)行0配置
-打包工具 - > 輸出結(jié)果（js模塊）
-打包（支持我們的js的模塊化）
手動(dòng)配置webpack
1. Webpack DevServer配置
devServer(Object類型)
該配置會(huì)被webpack-dev-server使用，并從不同方面做定制。
下面是一個(gè)例子再膳，使用gzips提供對(duì)dist/文件夾下內(nèi)容的訪問(wèn)坷襟。
devServer: {
contentBase: path.join(__dirname, "dist"),//對(duì)外提供的訪問(wèn)內(nèi)容的路徑
compress: true,//是否啟用gzip壓縮
port: 3000//提供訪問(wèn)的端口
}
當(dāng)server運(yùn)行后构蹬，在請(qǐng)求時(shí)會(huì)打印如下內(nèi)容
http://localhost:9000/
webpack result is served from /build/
content is served from dist/
如果以Node.js API的方式使用dev-server溃蔫，則devServer中的配置將會(huì)被忽略皆疹。
需要將設(shè)置的options作為第二個(gè)參數(shù)進(jìn)行傳遞new WebpackDevServer(compiler,{...})通過(guò)Node.js API進(jìn)行配置的內(nèi)容參見(jiàn)此處
devServer.clientLogLevel(String 類型)
當(dāng)使用inline mode，devTools的命令行中將會(huì)顯示一些調(diào)試信息蝶怔，
如：before loading县爬，before an error 或 Hot Module Replacement被啟用。
這類調(diào)試信息添谊，可能會(huì)讓輸出變得比較亂财喳。
可以通過(guò)如下設(shè)置禁止顯示上述的調(diào)試信息。
clientLogLevel: "none"
其中的值可以是none,error,warning或info斩狱。
如果不設(shè)置默認(rèn)的log level 為info耳高。
注意console一致都會(huì)顯示bundle error和warning。上面的配置只對(duì)log級(jí)別低的message有效所踊。
devServer.compress(boolean 類型)
對(duì)所有請(qǐng)求啟用gzip壓縮
compress: true
devServer.contentBase(boolean string array類型)
設(shè)置server對(duì)外服務(wù)的內(nèi)容來(lái)源泌枪，只有在提供靜態(tài)文件訪問(wèn)的情況下才需要使用該配置。
devServer.publicPath會(huì)被用來(lái)設(shè)置提供bundles文件的位置秕岛，而且會(huì)優(yōu)先考慮該配置的路徑碌燕。
默認(rèn)情況下會(huì)使用當(dāng)前運(yùn)行命令的文件夾作為內(nèi)容源，可以使用如下配置對(duì)此進(jìn)行更改继薛。
contentBase: path.join(__dirname, "public")
注意：建議使用絕對(duì)路徑修壕，不要使用相對(duì)路徑
可以定義多個(gè)文件夾提供數(shù)據(jù)源。
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]
禁止使用contentBase可以做如下設(shè)置
contentBase: false
devServer.filename(String)
該配置可以配置成lazy mode來(lái)減少編譯慈鸠，lazy modee模式下默認(rèn)會(huì)在每次請(qǐng)求時(shí)，
進(jìn)行一次編譯青团。使用filename,可以設(shè)置當(dāng)請(qǐng)求某個(gè)指定的文件時(shí)，才執(zhí)行編譯督笆。
如果output.filename被設(shè)置位bundle.js并且filename如下使用,
則僅僅會(huì)在請(qǐng)求bundle.js時(shí)，進(jìn)行編譯诱贿。
lazy: true,
filename:"bundle.js"
如果是設(shè)置
filename而不設(shè)置lazy mode娃肿，則不會(huì)有任何效果瘪松。
devServer.headers(object)
為所有請(qǐng)求添加headers
headers: {
"X-Custom-Foo": "bar"
}
devServer.historyApiFallback(boolean object)
當(dāng)使用html5 history api,將會(huì)在響應(yīng)404時(shí)返回index.html咸作。想要開(kāi)啟該功能進(jìn)行如下設(shè)置
