webpack3 配置多入口和多出口

我們之前寫到的webpack.config.js，具體**如下：

module.exports =

}

下面我們建立乙個多入口，多出口的例項。

1.新建資料夾：page，並在該資料夾下面建立index.html和signup.html2個檔案

index.html**如下：

signup.html**如下:

2.在src資料夾下面建立base.js,  index.js, signup.js3個js 檔案：

base.js:

var open=true

;export ;

import  from './base';

if(open)

import  from './base';

if(open)else

signup.html 引用了base.js 和 signup.js。

我們通過webpack如何分別打包js檔案呢？這裡我們通過 webpack 的多入口 和 多出口配置就能達到該目的了。

3. 配置多入口，多出口：

module.exports =,

output: 
}

最後執行打包命令，可以看到 dist 目錄下面生成了 index.bundle.js 和 signup.bundle.js 。

所以這裡的[name] 等同於 entry 定義的鍵名。

執行結果如下：

檔案打包完成之後，記得把你html 引用的js 路徑改成你打包後的js路徑。如下圖：

index.html:

signup.html:

感謝閱讀~~

webpack 多入口配置

順著官網的操作，我們可以本地測試起我們的專案 npm run dev,首先我們要理解webpack打包主要是針對js，檢視下面生成的配置，首頁是index.html，模版用的index.html，入口檔案用的mian.js file build webpack.base.conf.js entry ...

webpack 多入口打包分析

文章最後都是老夫精挑細選的乾貨哦 1 為什麼需要多入口打包？或者說什麼時候需要多入口打包？先從但入口打包說起，單入口也就是常見的單頁面應用，就是任何使用者想訪問我這個 必須且通過這乙個唯一的入口 比如我們開發了乙個 外賣 10.79.64.4 8080 index.html,主頁 有很多吃的種類，比...

webpack的多入口多出口配置手記

webpack.prod.js檔案配置 let path require path let htmlwebpackplugin require html webpack plugin let require clean webpack plugin module.exports output plu...