After gathering all the assets together, you also need to tell webpack where to package the application. The output attribute of webpack describes how to handle bundled code. The following article will give you an in-depth understanding of the output (Output) in the core concept of webpack. I hope it will be helpful to you!

Output: Configuring the output option can control how webpack writes compiled files to the hard disk. Note that even though multiple entry points can exist, only one output configuration is specified.

Start

---

We first npm init initialize a project and install webpack and webpack locally -cli, then create index.html, webpack.config.js and src folders in the root directory, and create another one inside the folder main.jsAs the entry file

After the preparation work is completed, as shown in the figure:

main. js

function?Component(){
????var?div=document.createElement('div')
????div.innerHTML="來一起學(xué)習(xí)出口配置吧~"
????return?div
}
document.body.appendChild(Component())

index.html

????<script></script>

packag.json

"scripts":?{
??"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
??"build":"webpack"?//加上
},

The next step is the configuration part:webpack.config.js

Output)

---

Configurationoutput options can control how webpack sends The compiled file is written to the hard disk.

Note that even though there can be multiple entrancesstarting points, only one outputconfiguration

The following are several output configurations Concept:

1, path

path specifies the location of resource output, and the required value must be an absolute path , such as :

const?path=require('path')
module.exports={
????entry:'./src/main.js',
????output:{
????????filename:'bundle.js',
????????//將資源輸出位置設(shè)置為該項(xiàng)目的dist目錄
????????path:?path.resolve(__dirname,?'dist')
????},
}

After Webpack 4, output.path has defaulted to the dist directory. Unless we need to change it, there is no need to configure it separately, so if it is webpack4 or above, you can write:

module.exports={
????entry:'./src/main.js',
????output:{
????????filename:'bundle.js',
????},
}

2, filename

filename The function is to control the file name of the output resource, which is in the form of a string. Here I named it bundle.js, which means I want the resources to be output in a file called bundle.js:

module.exports={
????entry:'./src/main.js',
????output:{
????????filename:'bundle.js',
????},
}

As shown in the figure after packaging, a # will be automatically generated. ##dist folder, there is a bundle.js file

filename can be not only the name of the bundle, but also It can be a relative path

It doesn’t matter even if the directory in the path does not exist, Webpack will create the directory when outputting resources, for example:

??module.exports?=?{
????output:?{
??????filename:?'./js/bundle.js',
????},
??};

After packaging, it is like this:

In a multi-entry scenario, we need to specify a different name for each generated bundle. Webpack supports the use of a similar template language Dynamically generate the file name in the form

Before that, we create a new entry file

vender.js in src

:

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',
????},
?};

After packaging, as shown in the figure:

[name] in filename will Replaced with chunk name, namely main and vendor. Therefore, vendor.js and main.js

will be generated in the end. If you want to see the content, you still need to

index.htmlChange the content in the middle and match the path to the last packaged bundle

????<script></script>
????<script></script>

[Question] There will be a need at this time, how to make

index.html automatically help What if we add the generated bundle to html? The plug-in HtmlWebpackPlugin can be used here. See the details below

3. Others

except

[name] In addition to chunk name, there are several other template variables that can be used in the configuration of filename:

[hash]: refers to the hash generated by Webpack for packaging all resources this time
• [chunkhash]: refers to the hash of the current chunk content
• [id]: refers to the id of the current chunk
• [query]: refers to the query
• in the filename configuration item

They can:

Control client-side caching

[hash] and [chunkhash] are both directly related to chunk content , if used in filename, when the content of the chunk changes, it can also cause the resource file name to change, so that the user will immediately download the new version when requesting the resource file next time without using the local cache.

[query] can also have a similar effect, but it has nothing to do with the chunk content and must be manually specified by the developer.

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了

源碼可從這里獲?。?/p>

https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/files

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程視頻?。?/p>

The above is the detailed content of Output, the core concept of webpack. For more information, please follow other related articles on the PHP Chinese website!