output

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

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

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

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

crossOriginLoading: 設置script的cross-origin屬性，該屬性有三個值：

false: 默認值, 表示不跨域；

anonymous: 表示跨域，不設置任何憑證；

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

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

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

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

// webpack自帶的一些內置變量一樣的東西。

[name]：原始文件名稱

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

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

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

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

library: 不僅僅是一個文件，而是需要導出一個庫。則就會把入口文件export defalut導出的東西創(chuàng)建成一個ems形式的的包文件，即可在任意項目內就通過script或import形式引入使用了。

library.name包名稱

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

library.export：指定哪個導出應該暴露為一個庫，假如入口文件有l(wèi)og1，log2兩個方法。則可以指定導出誰。

library.auxiliarycomment:在UMD模式下可用，可以在js內添加注釋說明，一般用于，顯示作者，代碼版本號，版權等等信息。

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

最常用的也就是這些了。

entry

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

webpack默認入口entry: src/index.js，出口為:dist/main.js

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

例如：

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

此時webpack.config.js中已經(jīng)沒有內容，這時候執(zhí)行npm run build會直接報錯。

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

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

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

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

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

webpack.config.js中內容如下：

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

這context是干啥的??？

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

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

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

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

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

說到entry了，那我為何就不能有多個入口文件呢？

entry可以配置多個入口文件，當只有一個的時候值為string類型，多個的時候就為Array

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

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

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

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

下面內容就是說：我不想讓index.js和test.js打包在一起, 讓他們分別打包

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

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

我們測試entry為以下的配置：

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

因為每次構建都需要刪除dist文件夾才能保證不緩存任何東西，則我們在package.json中輸入：

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

再執(zhí)行npm run build

如果報錯說'rm' 不是內部或外部命令，也不是可運行的程序，那你就別改package.json，手動刪除dist文件一下即可

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

我們再改變一點:

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文件夾內有：nba.js和cba.js

總結

context: 指定/是誰

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

以上就是webpack5的entry和output配置小白學習的詳細內容，更多關于webpack5的entry和output配置的資料請關注腳本之家其它相關文章！

最新評論