站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

webpack核心概念之輸出(Output)

將所有的資源(assets)歸攏在一起后,還需要告訴 webpack 在哪里打包應(yīng)用程序。webpack 的 output 屬性描述了如何處理歸攏在一起的代碼(bundled code)。下面本篇文章就來帶大家深入了解一下webpack核心概念中的輸出(Output),希望對大家有所幫助!

webpack核心概念之輸出(Output)

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

起步


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

準(zhǔn)備工作完成后如圖所示:

webpack核心概念之輸出(Output)

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 如何向硬盤寫入編譯文件。

注意,即使可以存在多個入口起點(diǎn),但只指定一個輸出配置

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

1、path

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

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,意為我希望資源輸出在一個叫bundle.js的文件中:

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

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

webpack核心概念之輸出(Output)

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

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

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

打包后如圖:

webpack核心概念之輸出(Output)

在多入口的場景中,我們需要對產(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',     },  };

打包后如圖:

webpack核心概念之輸出(Output)

filename中的[name]會被替換為chunk name即main和vender。因此最后會生成vendor.jsmain.js

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

<body>     <script src="./dist/main.js"></script>     <script src="./dist/vender.js"></script> </body>

[問題]這時候就會有個需求了,如何讓index.html自動幫我們將生成的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)容改變時,可以同時引起資源文件名的更改,從而使用戶在下一次請求資源文件時會立即下載新的版本而不會使用本地緩存。

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

4、publicPath

publicPath是一個非常重要的配置項(xiàng),用來指定資源的請求位置

以加載圖片為例

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后,實(shí)際路徑就變成了了./dist/static/img/img.jpg,這樣就能從打包后的資源中獲取圖片了

publicPath有3種形式:

  • HTML相關(guān)

    我們可以將publicPath指定為HTML的相對路徑,在請求這些資源時會以當(dāng)前頁面HTML所在路徑加上相對路徑,構(gòu)成實(shí)際請求的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的值以“/”開始,則代表此時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)

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

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

    當(dāng)publicPath以協(xié)議頭或相對協(xié)議的形式開始時,代表當(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、單個入口

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

  • filename 用于輸出文件的文件名。
  • 目標(biāo)輸出目錄 path 的絕對路徑
module.exports={     entry:'./src/main.js',     output:{         filename:'bundle.js',     }, } //webpack4以后dist會默認(rèn)生成,于是這里省略了path

2、多個入口

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

這里用到了上面所講的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',     },  };

打包

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

webpack核心概念之輸出(Output)

這意味著,以后初始化一個項(xiàng)目就不必寫index.html

源碼可從這里獲取:

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

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
亚洲精品中文字幕麻豆| 中文字幕精品一区| 精品少妇人妻AV免费久久洗澡| 99re这里有免费视频精品| 精品一区二区三区四区| 国自产精品手机在线观看视频| 亚洲精品国产自在久久| 国产日韩精品视频| 国产精品va一区二区三区| 精品伊人久久大线蕉地址| 免费无码精品黄AV电影| 中文字幕国产精品| 亚洲国产精品综合久久20| 中文字幕精品一区影音先锋| 99久热re在线精品996热视频| 午夜精品久久久久久久久| 久久精品国产精品| 国产AV午夜精品一区二区入口| 精品精品国产高清a毛片牛牛| 国产色无码精品视频免费| 在线观看亚洲精品国产| 老司机亚洲精品影视www| 精品国产乱码久久久久久浪潮| 亚洲午夜精品久久久久久浪潮| 亚洲精品成人区在线观看| 无码人妻精品一区二区蜜桃百度| 精品一区二区三区四区电影| 亚洲av综合日韩| 日韩精品一区二区三区中文字幕| 午夜精品一区二区三区在线视 | 999久久久免费精品国产| 91精品成人免费国产片| 亚洲精品高清国产麻豆专区| 久久99久久99精品免视看动漫| 久久成人国产精品| 亚洲自偷精品视频自拍| 精品国产一二三产品价格| 国产精品永久免费10000| 最新 国产 精品 精品 视频| 国产精品久久新婚兰兰| 久久久久人妻精品一区三寸|