站長資訊網
最全最豐富的資訊網站

webpack核心概念之輸出(Output)

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

webpack核心概念之輸出(Output)

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

起步


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

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

webpack核心概念之輸出(Output)

main.js

function Component(){     var div=document.createElement('div')     div.innerHTML="來一起學習出口配置吧~"     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 選項可以控制 webpack 如何向硬盤寫入編譯文件。

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

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

1、path

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

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

在Webpack 4之后,output.path已經默認為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文件

webpack核心概念之輸出(Output)

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

即便路徑中的目錄不存在也沒關系,Webpack會在輸出資源時創建該目錄,比如:

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

打包后如圖:

webpack核心概念之輸出(Output)

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

在此之前,我們再去src中創建一個新的入口文件

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

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

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

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

3、其他

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

  • [hash]:指代Webpack此次打包所有資源生成的hash
  • [chunkhash]:指代當前chunk內容的hash
  • [id]:指代當前chunk的id
  • [query]:指代filename配置項中的query

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

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

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

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相關

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

    //假設當前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相關

    若publicPath的值以“/”開始,則代表此時publicPath是以當前頁面的host name為基礎路徑的

    //假設當前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相關

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

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

    當publicPath以協議頭或相對協議的形式開始時,代表當前路徑是CDN相關

    //假設當前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

應用


1、單個入口

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

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

2、多個入口

如果配置創建了多個單獨的 "chunk",則應該使用占位符來確保每個文件具有唯一的名稱

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

打包

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

webpack核心概念之輸出(Output)

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

源碼可從這里獲取:

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

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
久久精品国产亚洲AV久| 国内精品久久久久影院网站 | 99热这里只/这里有精品| 国产精品高清在线观看| 免费久久精品国产片香蕉| 天堂一区二区三区精品| 国内精品久久久久影院一蜜桃| 日韩人妻精品无码一区二区三区| 成人国产精品高清在线观看| 国产精品自产拍在线网站| 中文字幕在线精品| 精品亚洲av无码一区二区柚蜜| 精品日韩在线视频一区二区三区| 日韩人妻一区二区三区蜜桃视频| 日本精品一二三区| 久久久精品2019免费观看| 日韩精品中文字幕在线| 国产午夜精品理论片久久影视 | 香蕉精品视频在线观看| 日韩精品一区二三区中文| 精品永久久福利一区二区| 国产色婷婷五月精品综合在线| 精品久久久久久久久免费影院| 91精品福利视频| 在线中文字幕精品第5页| 亚洲AV日韩精品久久久久久久 | 精品国产呦系列在线观看免费| 亚洲欧洲中文日韩久久AV乱码 | 精品国产一区二区三区| 亚洲AV无码精品蜜桃| 亚洲国产成人一区二区精品区| sihu国产精品永久免费| 日韩成av人片在线观看| 国产精品亚洲精品日韩动图| 亚洲а∨天堂久久精品9966| 亚洲高清国产AV拍精品青青草原| 国内精品久久久久影院一蜜桃| 国产精品成人小电影在线观看| 国产成人一区二区三区精品久久 | 久久亚洲精品无码gv| 国产成人精品久久免费动漫|