站長(zhǎng)資訊網(wǎng)將所有的資源(assets)歸攏在一起后，還需要告訴 webpack 在哪里打包應(yīng)用程序。webpack 的 output 屬性描述了如何處理歸攏在一起的代碼(bundled code)。下面本篇文章就來帶大家深入了解一下webpack核心概念中的輸出（Output），希望對(duì)大家有所幫助！
輸出(Output)：配置 output 選項(xiàng)可以控制 webpack 如何向硬盤寫入編譯文件。注意，即使可以存在多個(gè)入口起點(diǎn)，但只指定一個(gè)輸出配置。
起步
我們先npm init初始化一個(gè)項(xiàng)目，本地安裝webpack和webpack-cli，然后在根目錄創(chuàng)建index.html、webpack.config.js和src文件夾，在文件夾內(nèi)再創(chuàng)建一個(gè)main.js作為入口文件
準(zhǔn)備工作完成后如圖所示：
main.js
function Component(){ var div=document.createElement('div') div.innerHTML="來一起學(xué)習(xí)出口配置吧~" return div } document.body.appendChild(Component())
index.html
<body> <script src="./dist/bundle.js"></script> </body>
packag.json
"scripts": { "test": "echo "Error: no test specified" && exit 1", "build":"webpack" //加上 },
接下來就是配置部分：webpack.config.js
輸出（Output)）
配置 output 選項(xiàng)可以控制 webpack 如何向硬盤寫入編譯文件。
注意，即使可以存在多個(gè)入口起點(diǎn)，但只指定一個(gè)輸出配置
下面是輸出配置的幾個(gè)概念：
1、path
path指定資源輸出的位置，要求值必須為絕對(duì)路徑，如：
const path=require('path') module.exports={ entry:'./src/main.js', output:{ filename:'bundle.js', //將資源輸出位置設(shè)置為該項(xiàng)目的dist目錄 path: path.resolve(__dirname, 'dist') }, }
在Webpack 4之后，output.path已經(jīng)默認(rèn)為dist目錄。除非我們需要更改它，否則不必單獨(dú)配置，所以如果是webpack4以上，你可以寫成：
module.exports={ entry:'./src/main.js', output:{ filename:'bundle.js', }, }
2、filename
filename的作用是控制輸出資源的文件名，其形式為字符串。在這里我把它命名為bundle.js，意為我希望資源輸出在一個(gè)叫bundle.js的文件中：
module.exports={ entry:'./src/main.js', output:{ filename:'bundle.js', }, }
打包后如圖，會(huì)自動(dòng)生成一個(gè)dist文件夾，里面有個(gè)bundle.js文件
filename可以不僅僅是bundle的名字，還可以是一個(gè)相對(duì)路徑
即便路徑中的目錄不存在也沒關(guān)系，Webpack會(huì)在輸出資源時(shí)創(chuàng)建該目錄，比如：
module.exports = { output: { filename: './js/bundle.js', }, };
打包后如圖：
在多入口的場(chǎng)景中，我們需要對(duì)產(chǎn)生的每個(gè)bundle指定不同的名字，Webpack支持使用一種類似模板語言的形式動(dòng)態(tài)地生成文件名
在此之前，我們?cè)偃?code>src中創(chuàng)建一個(gè)新的入口文件
vender.js：
function Component(){ var div=document.createElement('div') div.innerHTML="我是第二個(gè)入口文件" return div } document.body.appendChild(Component())
webpack.config.js：
module.exports = { entry:{ main:'./src/main.js', vender:'./src/vender.js' }, output: { filename: '[name].js', }, };
打包后如圖：
filename中的[name]會(huì)被替換為chunk name即main和vender。因此最后會(huì)生成vendor.js與main.js
此時(shí)如果你希望看到內(nèi)容，你還需在index.html中改下內(nèi)容，將路徑對(duì)應(yīng)上最后打包出來的bundle
<body> <script src="./dist/main.js"></script> <script src="./dist/vender.js"></script> </body>
[問題]這時(shí)候就會(huì)有個(gè)需求了，如何讓
index.html自動(dòng)幫我們將生成的bundle添加到html中呢？這里可以用到插件 HtmlWebpackPlugin，詳細(xì)看下方
3、其他
除了[name]可以指代chunk name以外，還有其他幾種模板變量可以用于filename的配置中：
- [hash]：指代Webpack此次打包所有資源生成的hash
- [chunkhash]：指代當(dāng)前chunk內(nèi)容的hash
- [id]：指代當(dāng)前chunk的id
- [query]：指代filename配置項(xiàng)中的query
它們可以：控制客戶端緩存
[hash]和[chunkhash]都與chunk內(nèi)容直接相關(guān)，如果在filename中使用，當(dāng)chunk的內(nèi)容改變時(shí)，可以同時(shí)引起資源文件名的更改，從而使用戶在下一次請(qǐng)求資源文件時(shí)會(huì)立即下載新的版本而不會(huì)使用本地緩存。
[query]也可以起到類似的效果，但它與chunk內(nèi)容無關(guān)，要由開發(fā)者手動(dòng)指定。
4、publicPath
publicPath是一個(gè)非常重要的配置項(xiàng)，用來指定資源的請(qǐng)求位置
以加載圖片為例
import Img from './img.jpg'; function component() { //... var img = new Image(); myyebo.src = Img //請(qǐng)求url //... }
{ //... query: { name: '[name].[ext]', outputPath: 'static/img/', publicPath: './dist/static/img/' } }
由上面的例子所示，原本圖片請(qǐng)求的地址是./img.jpg，而在配置上加上publicPath后，實(shí)際路徑就變成了了./dist/static/img/img.jpg，這樣就能從打包后的資源中獲取圖片了
publicPath有3種形式：
-
HTML相關(guān)
我們可以將publicPath指定為HTML的相對(duì)路徑，在請(qǐng)求這些資源時(shí)會(huì)以當(dāng)前頁面HTML所在路徑加上相對(duì)路徑，構(gòu)成實(shí)際請(qǐng)求的URL
//假設(shè)當(dāng)前html地址為：https://www.example.com/app/index.html //異步加載的資源名為 1.chunk.js pubilicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js pubilicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
-
Host相關(guān)
若publicPath的值以“/”開始，則代表此時(shí)publicPath是以當(dāng)前頁面的host name為基礎(chǔ)路徑的
//假設(shè)當(dāng)前html地址為：https://www.example.com/app/index.html //異步加載的資源名為 1.chunk.js pubilicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
-
CDN相關(guān)
上面兩個(gè)都是相對(duì)路徑，我們也可以使用絕對(duì)路徑的形式配置publicPath
這種情況一般發(fā)生于靜態(tài)資源放在CDN上面時(shí)，由于其域名與當(dāng)前頁面域名不一致，需要以絕對(duì)路徑的形式進(jìn)行指定
當(dāng)publicPath以協(xié)議頭或相對(duì)協(xié)議的形式開始時(shí)，代表當(dāng)前路徑是CDN相關(guān)
//假設(shè)當(dāng)前html地址為：https://www.example.com/app/index.html //異步加載的資源名為 1.chunk.js pubilicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js pubilicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
應(yīng)用
1、單個(gè)入口
在 webpack 中配置 output 屬性的最低要求是將它的值設(shè)置為一個(gè)對(duì)象，包括以下兩點(diǎn)：
filename用于輸出文件的文件名。- 目標(biāo)輸出目錄
path的絕對(duì)路徑
module.exports={ entry:'./src/main.js', output:{ filename:'bundle.js', }, } //webpack4以后dist會(huì)默認(rèn)生成，于是這里省略了path
2、多個(gè)入口
如果配置創(chuàng)建了多個(gè)單獨(dú)的 "chunk"，則應(yīng)該使用占位符來確保每個(gè)文件具有唯一的名稱
這里用到了上面所講的filename的[name]
另外，如果想將這些資源放進(jìn)指定的文件夾，可以加上path配置
module.exports={ entry: { main: './src/main.js', vender: './src/vender.js' }, output: { filename: '[name].js', path: __dirname + '/dist/assets' //指定打包后的bundle放在/dist/assets目錄下 } } // 打包后生成：./dist/assets/main.js, ./dist/assets/vender.js
HtmlWebpackPlugin
本章上方遺留的問題可以通過使用插件HtmlWebpackPlugin解決
安裝插件
npm install --save-dev html-webpack-plugin
配置插件
const HtmlWebpackPlugin=require('html-webpack-plugin') //加載模塊 module.exports = { entry:{ main:'./src/main.js', vender:'./src/vender.js' }, //添加插件 plugins:[ new HtmlWebpackPlugin({ title:'output management' }) ], output: { filename: '[name].js', }, };
打包
打包完成后你會(huì)發(fā)現(xiàn)dist中出現(xiàn)了一個(gè)新的index.html,上面自動(dòng)幫我們添加所生成的資源，打開后會(huì)發(fā)現(xiàn)瀏覽器會(huì)展示出內(nèi)容
這意味著，以后初始化一個(gè)項(xiàng)目就不必寫index.html了
源碼可從這里獲取：
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/files
