output

輸出打包后的代碼，配置如何輸出和輸出位置

在webpack.config中output包含以下屬性：

path：代碼打包后要輸出的位置，且為絕對(duì)路徑: 例如：path.resolve(__dirname, 'build')，則打包后的代碼都會(huì)輸出到當(dāng)前目錄下的build文件夾內(nèi)。

publicPath：需要加載的資源的真實(shí)路徑，默認(rèn)為相對(duì)路徑：例如:http://www.baidu.com/dist/，
則在index.html中可以看到script標(biāo)簽的src屬性的值都加了publicPath的值。一般情況下我們都將它設(shè)置為/或者./

crossOriginLoading: 設(shè)置script的cross-origin屬性，該屬性有三個(gè)值：

false: 默認(rèn)值, 表示不跨域；

anonymous: 表示跨域，不設(shè)置任何憑證；

use-credentials: 表示跨域，需要設(shè)置憑證；(基本用不到)

filename打包后的js文件名稱，且需要寫(xiě)后綴

assetModuleFilename靜態(tài)資源輸出名稱

chunkFilename 異步引入的文件名稱，既在js中import('XXX.js').then(_=>{})這樣引入或者通過(guò)webpack自帶的異步引入方式等其他異步引入js的方式，這里就會(huì)使用配置的名稱;asseet_[name]_[id].js可以配置成通用形式，也可以自己指定[chunk]值。

// webpack自帶的一些內(nèi)置變量一樣的東西。

[name]：原始文件名稱

[file]：原始路徑，帶文件名、后綴

[base]：原始文件名+后綴

[path]：路徑名稱，不帶文件名稱

[id]：可以設(shè)置，或者按照路徑分割，啥都不管的話就等于webpack給當(dāng)前文件引用的key值

library: 不僅僅是一個(gè)文件，而是需要導(dǎo)出一個(gè)庫(kù)。則就會(huì)把入口文件export defalut導(dǎo)出的東西創(chuàng)建成一個(gè)ems形式的的包文件，即可在任意項(xiàng)目?jī)?nèi)就通過(guò)script或import形式引入使用了。

library.name包名稱

library.type:var,module,umd,cmd,amd,require等等

library.export：指定哪個(gè)導(dǎo)出應(yīng)該暴露為一個(gè)庫(kù)，假如入口文件有l(wèi)og1，log2兩個(gè)方法。則可以指定導(dǎo)出誰(shuí)。

library.auxiliarycomment:在UMD模式下可用，可以在js內(nèi)添加注釋說(shuō)明，一般用于，顯示作者，代碼版本號(hào)，版權(quán)等等信息。

library.umdNamedDefine: 在UMD模式下是否使用define

最常用的也就是這些了。

entry

我可以指定webpack的配置文件，通過(guò)--config

webpack默認(rèn)入口entry: src/index.js，出口為:dist/main.js

默認(rèn)配置文件為:webpack.config.js如果需要指定其他配置文件，可以使用--config

例如：

在webpack5文件夾根目錄創(chuàng)建一個(gè)名為:webpack.dev.js，將webpack.config.js中的內(nèi)容剪貼到它中。

此時(shí)webpack.config.js中已經(jīng)沒(méi)有內(nèi)容，這時(shí)候執(zhí)行npm run build會(huì)直接報(bào)錯(cuò)。

我們修改package.json中scripts屬性的值為:

"scripts": {
    "build": "webpack --config ./webpack.dev.js"
 }

再執(zhí)行npm run build發(fā)現(xiàn)可以構(gòu)建成功，則我們就將默認(rèn)的配置文件改為了webpack.dev.js這在日后我們需要不同環(huán)境構(gòu)建不同內(nèi)容時(shí)候，通過(guò)命令可以輕松構(gòu)控制配置文件的使用起到關(guān)鍵性作用。

好了，上面內(nèi)容過(guò)于簡(jiǎn)單，就不使用webpack-cli來(lái)創(chuàng)建了，有興趣的小伙伴可以自行搜索

我可以指定webpack的需要工作的根目錄

webpack.config.js中內(nèi)容如下：

module.exports = {
    context: path.resolve(__dirname, 'src'), // 
    entry: './src/index.js',
}

這context是干啥的?。?/p>

執(zhí)行以下npm run build，發(fā)現(xiàn)報(bào)錯(cuò)了?？磮?bào)錯(cuò)信息為：

Module not found: Error: Can`t  resolve './src/index.js' in 'User/xxx/webpack5/src'

這下我們翻譯一波不就理解了么！原來(lái)context指定到src為上下文了，則我們內(nèi)部使用的目標(biāo)都指定到src目錄了。那entry就不能再寫(xiě)成./src/index.js了。（你真廢話，能講明白不？）

其實(shí)就是一句話：使用了context后，則入口出口路徑都是以context配置的路徑為基準(zhǔn)了。因此，entry就得寫(xiě)成/index.js或./index.js, 因?yàn)楝F(xiàn)在/就指得是src目錄。

把context先刪除或者注釋了吧，下面的內(nèi)容用不到。。。

說(shuō)到entry了，那我為何就不能有多個(gè)入口文件呢？

entry可以配置多個(gè)入口文件，當(dāng)只有一個(gè)的時(shí)候值為string類型，多個(gè)的時(shí)候就為Array

module.exports = {
    entry: ['./src/index.js', './src/test.js'] // 多個(gè)為Array，有先后順序之分
}

我們可以在test.js中輸入一串代碼console.log('少裝B，不會(huì)造雷劈！')，再執(zhí)行npm run build，雙擊打開(kāi)dist/index.html，F12打開(kāi)控制臺(tái)，可以發(fā)現(xiàn)：index.js和test.js中的內(nèi)容都輸出了。

（誒?我就想讓test.js放數(shù)組第一位，你會(huì)發(fā)現(xiàn)，test.js中的內(nèi)容先打印了）entry也是有先后順序之分的，數(shù)組前面的先執(zhí)行，后面的以此類推。

entry也可以是object類型，用的比較少，稍微記一下得了。若你是大牛，需要寫(xiě)自己的js插件引擎啥的，那你就學(xué)吧。

下面內(nèi)容就是說(shuō)：我不想讓index.js和test.js打包在一起, 讓他們分別打包

entry: {
    moment: { import: 'moment-mini', runtime: 'runtime' }, // 將公用部分提出來(lái), 生成dist/moment.js并自動(dòng)加入到html內(nèi)，通過(guò)script標(biāo)簽加入
    reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' }, // 將公用部分提出來(lái), 生成dist/reactvendors.js并自動(dòng)加入到html內(nèi)，通過(guò)script標(biāo)簽加入
    abc: ['vue', 'react'],
    app: {
        import: './src/index.js', // 入口文件
        dependOn: ['abc'], // 本來(lái)app構(gòu)建時(shí)候會(huì)打包所有依賴，但這里配置了abc，則就不會(huì)將'vue','react'打包在內(nèi)
        filename: 'app.js' // 打包后的文件名稱
    },
    test: {
        import: './src/test.js', // 入口文件
        dependOn: ['reactvendors', 'moment'], // 本來(lái)test構(gòu)建時(shí)候會(huì)打包所有依賴，但這里配置了reactvendors，moment ，則就不會(huì)將其所需要的包打包在內(nèi)，而是通過(guò)共享形式加入到html中
        filename: 'pages/[name].js' // 打包后的文件名稱，也可以寫(xiě)成 'pages/test.js'，則生產(chǎn)地址為'dist/pages/test.js', [name]: test
    },
}

entry: {
    app: './src/index.js', // 入口文件,
    test: ['./src/test.js', './src/nulls.js'], // 多個(gè)入口文件
}

我們測(cè)試entry為以下的配置：

entry: {
    app: {
        import './src/index.js'
    },
    test: './src/test.js'
}

因?yàn)槊看螛?gòu)建都需要?jiǎng)h除dist文件夾才能保證不緩存任何東西，則我們?cè)?code>package.json中輸入：

"scripts": {
    "build": "rm -rf ./dist && webpack",
    "build:dev": "rm -rf ./dist && webpack --config ./webpack.dev.js" // 這行我寫(xiě)著只是為了方便讀者理解
  },
// 或者你手動(dòng)刪除一下dist文件夾，不改package.json也行，可能你運(yùn)行在cmd中不支持rm命令，可以使用git的bash命令行窗口
// windows平臺(tái)下的vscode自帶的命令行可能不支持rm命令，所以手動(dòng)刪除一下dist，就別改package.json文件了

再執(zhí)行npm run build

如果報(bào)錯(cuò)說(shuō)'rm' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序，那你就別改package.json，手動(dòng)刪除dist文件一下即可

可以發(fā)現(xiàn)dist文件夾內(nèi)有兩個(gè)js文件：app.js和test.js，再打開(kāi)index.html文件，發(fā)現(xiàn)它們兩個(gè)js文件也都被自動(dòng)以<script>標(biāo)簽形式引入了。

我們?cè)俑淖円稽c(diǎn):

entry: {
    app: {
        import './src/index.js',
        filename: 'nba.js'
    },
    cba: {
        import './src/index.js',
        filename: '[name].js'
    },
}

再執(zhí)行npm run build,可以發(fā)現(xiàn)dist文件夾內(nèi)有：nba.js和cba.js

總結(jié)

context: 指定/是誰(shuí)

entry: 指定一個(gè)或多個(gè)入口文件，dependOn可以共享打包資料

以上就是webpack5的entry和output配置小白學(xué)習(xí)的詳細(xì)內(nèi)容，更多關(guān)于webpack5的entry和output配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論