技術標籤：webpack

文章目錄

• • • • • 一、webpack-核心概念-entry/output
        • 二、具體配置
        • • 1. 配置多個入口，多個出口
          • 2. 配置輸出字首

一、webpack-核心概念-entry/output

entry:

入口起點指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。

預設值是 ./src/index.js，但你可以通過在 webpack configuration 中配置 entry 屬性，來指定一個（或多個）不同的入口起點

output：

output 屬性告訴 webpack 在哪裡輸出它所建立的打包檔案，以及如何命名這些檔案

預設值是 ./dist/main.js

，其他生成檔案預設放置在 ./dist 資料夾中。

總結：

webpack的打包入口可以是一個也可以是多個，出口也是可以有一個也可以有多個，完全取決於webpack.config.js的配置。當打包入口有多個，但是又希望，打包的出口可以不用在入口改變的時候，手動維護。那麼我們可以修改配置檔案，使得出口檔案的與入口檔案列舉的鍵值一一對應，定義了什麼入口檔案，就生成什麼出口檔案。

二、具體配置

1. 配置多個入口，多個出口

    entry: {
        main: './src/index.js'
      	sub: './src/sub.js'
    },
 		output: {
 

        filename: '[name].js', // 使用佔位符
        path: path.resolve(__dirname, 'dist')
    },  

2. 配置輸出字首

// 輸出字首加上CDN地址
 		output: {
 				 publicPath: 'http://cdn.com.cn'	
        filename: '[name].js', // 使用佔位符
        path: path.resolve(__dirname, 'dist')
    },