這篇文章主要介紹“webpack核心概念之output怎么配置”，在日常操作中，相信很多人在webpack核心概念之output怎么配置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”webpack核心概念之output怎么配置”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)建站長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為岱岳企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、做網(wǎng)站，岱岳網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

輸出(Output)：配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件。注意，即使可以存在多個入口起點，但只指定一個輸出配置。

起步

我們先npm init初始化一個項目，本地安裝webpack和webpack-cli，然后在根目錄創(chuàng)建index.html、webpack.config.js和src文件夾，在文件夾內(nèi)再創(chuàng)建一個main.js作為入口文件

準備工作完成后如圖所示：

main.js

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

index.html

packag.json

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

接下來就是配置部分：webpack.config.js

輸出（Output)）

配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件。

注意，即使可以存在多個入口起點，但只指定一個輸出配置

下面是輸出配置的幾個概念：

1、path

path指定資源輸出的位置，要求值必須為絕對路徑，如：

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

在Webpack 4之后，output.path已經(jīng)默認為dist目錄。除非我們需要更改它，否則不必單獨配置，所以如果是webpack4以上，你可以寫成：

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

2、filename

filename的作用是控制輸出資源的文件名，其形式為字符串。在這里我把它命名為bundle.js，意為我希望資源輸出在一個叫bundle.js的文件中：

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

打包后如圖，會自動生成一個dist文件夾，里面有個bundle.js文件

filename可以不僅僅是bundle的名字，還可以是一個相對路徑

即便路徑中的目錄不存在也沒關(guān)系，Webpack會在輸出資源時創(chuàng)建該目錄，比如：

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

打包后如圖：

在多入口的場景中，我們需要對產(chǎn)生的每個bundle指定不同的名字，Webpack支持使用一種類似模板語言的形式動態(tài)地生成文件名

在此之前，我們再去src中創(chuàng)建一個新的入口文件

vender.js：

function Component(){
    var div=document.createElement('div')
    div.innerHTML="我是第二個入口文件"
    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]會被替換為chunk name即main和vender。因此最后會生成vendor.js與main.js

此時如果你希望看到內(nèi)容，你還需在index.html中改下內(nèi)容，將路徑對應(yīng)上最后打包出來的bundle

[問題]這時候就會有個需求了，如何讓index.html自動幫我們將生成的bundle添加到html中呢？這里可以用到插件 HtmlWebpackPlugin，詳細看下方

3、其他

除了[name]可以指代chunk name以外，還有其他幾種模板變量可以用于filename的配置中：

• [hash]：指代Webpack此次打包所有資源生成的hash

• [chunkhash]：指代當前chunk內(nèi)容的hash

• [id]：指代當前chunk的id

• [query]：指代filename配置項中的query

它們可以：控制客戶端緩存

[hash]和[chunkhash]都與chunk內(nèi)容直接相關(guān)，如果在filename中使用，當chunk的內(nèi)容改變時，可以同時引起資源文件名的更改，從而使用戶在下一次請求資源文件時會立即下載新的版本而不會使用本地緩存。

[query]也可以起到類似的效果，但它與chunk內(nèi)容無關(guān)，要由開發(fā)者手動指定。

4、publicPath

publicPath是一個非常重要的配置項，用來指定資源的請求位置

以加載圖片為例

import Img from './img.jpg';
function component() {
    //...
    var img = new Image();
    myyebo.src = Img //請求url
	//...
}

        {
          //...
          query: {
            name: '[name].[ext]',
            outputPath: 'static/img/',
            publicPath: './dist/static/img/'
          }
        }

由上面的例子所示，原本圖片請求的地址是./img.jpg，而在配置上加上publicPath后，實際路徑就變成了了./dist/static/img/img.jpg，這樣就能從打包后的資源中獲取圖片了

publicPath有3種形式：

• HTML相關(guān)

  我們可以將publicPath指定為HTML的相對路徑，在請求這些資源時會以當前頁面HTML所在路徑加上相對路徑，構(gòu)成實際請求的URL

  //假設(shè)當前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的值以“/”開始，則代表此時publicPath是以當前頁面的host name為基礎(chǔ)路徑的

  //假設(shè)當前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)

  上面兩個都是相對路徑，我們也可以使用絕對路徑的形式配置publicPath

  這種情況一般發(fā)生于靜態(tài)資源放在CDN上面時，由于其域名與當前頁面域名不一致，需要以絕對路徑的形式進行指定

  當publicPath以協(xié)議頭或相對協(xié)議的形式開始時，代表當前路徑是CDN相關(guān)

  //假設(shè)當前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:"http://cdn.com/assets"	//-->//cdn.com/assets/1.chunk.js

應(yīng)用

1、單個入口

在 webpack 中配置 output 屬性的最低要求是將它的值設(shè)置為一個對象，包括以下兩點：

• filename 用于輸出文件的文件名。

• 目標輸出目錄 path 的絕對路徑

module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
    },
}
//webpack4以后dist會默認生成，于是這里省略了path

2、多個入口

如果配置創(chuàng)建了多個單獨的 "chunk"，則應(yīng)該使用占位符來確保每個文件具有唯一的名稱

這里用到了上面所講的filename的[name]

另外，如果想將這些資源放進指定的文件夾，可以加上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',
    },
 };

打包

打包完成后你會發(fā)現(xiàn)dist中出現(xiàn)了一個新的index.html,上面自動幫我們添加所生成的資源，打開后會發(fā)現(xiàn)瀏覽器會展示出內(nèi)容

這意味著，以后初始化一個項目就不必寫index.html了

到此，關(guān)于“webpack核心概念之output怎么配置”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
名稱欄目：webpack核心概念之output怎么配置
鏈接分享：http://weahome.cn/article/peshis.html