捆綁多個js文件

Question

在使用webpack進行響應時，每個js文件都捆綁到一個bundle.js中，例如對於我的常規html，css，js應用程序，我有6個庫。 例如考慮

我正在使用jquery和bootstrap min版本。 因此，如果我引用兩個文件，則請求將為兩個。 所以我怎么能把它做成一個文件呢。 因此，將有一個請求。

就像當我檢查文件大小約為kb並在不到1或2秒的時間內處理請求時一樣，例如chrome dev工具顯示了加載時間，它也同時加載了兩個文件。

但是如何使用webpack將兩個庫捆綁在一起，並得到一個我可以在我的應用程序中引用的文件。

我是webpack的初學者

Answer 1

您需要將它們導入您的入口點文件中，然后Webpack將處理捆綁。 在您使用React時，我假設您具有基本的命令行技能。

您可以閱讀《 入門指南》 ，該指南捆綁了Lodash，就像您嘗試捆綁jQuery和Bootstrap一樣。

首先，請確保使用npm （或用yarn ，如果您願意）安裝jQuery，Bootstrap和其他任何庫：

# Install Webpack as a dev dependency
npm install webpack webpack-cli --save-dev

# Install dependencies (I've added Popper.js as Bootstrap requires it)
npm install jquery bootstrap popper.js

創建一個名為src的文件夾，並在其中創建一個名為index.js的文件。 這是您的切入點 ，除非另行配置，否則Webpack將尋找該文件。 像這樣導入庫：

import $ from 'jquery'
import 'bootstrap'

// Do something with jQuery
$(document).ready(() => console.log('Hello world!'))

然后，使用運行的WebPack NPX ：

npx webpack

應該在包含捆綁代碼的dist文件夾中創建一個名為main.js的文件。 這是您的輸出文件。 您可以在HTML文件中使用<script>標記來加載此JavaScript：

<!-- assuming your index.html is in the dist folder -->
<script src='main.js'></script>

到達此處后，您可以探索更高級的內容，例如分別導入Bootstrap組件，最小化代碼，多個捆綁包，轉換TypeScript等。

您可能很快需要添加Webpack配置文件，因為使用零配置模式只能完成很多工作。

Answer 2

優良作法是為應用程序邏輯和外部庫保留兩個單獨的捆綁包，在webpack中，可以通過以下代碼來實現，

app.js應用索引文件，

vendors.js導入此文件中的所有外部庫

entry: { app: './src/app.js', vendors: './src/vendors.js' }

要獲取單個文件，請在app.js文件中導入vendor.js文件，並在webpack中輸入以下項作為輸入鍵：

entry: './src/app.js'

Answer 3

讓我們假設您在src目錄中有文件。 您可以通過在webpack.config.js中指定多個文件來合並多個文件，以將單個命名文件作為輸出。 我希望這是您要尋找的。

const path = require('path');

module.exports = {
  entry: {
  'bundle.js': [
   path.resolve(__dirname, 'src/file1.js'),
   path.resolve(__dirname, 'src/file2.js')
  ]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
    rules: [{
        exclude: /node_modules/ 
    }]
}
};

如上所述，兩個文件“ file1.js”和“ file2.js”將合並為一個文件“ bundle.js”，並存儲在“ dist”目錄中。 您還可以通過在webpack配置的模塊對象中指定規則來排除node_modules。