Question

在使用webpack进行响应时，每个js文件都捆绑到一个bundle.js中，例如对于我的常规html，css，js应用程序，我有6个库。例如考虑

我正在使用jquery和bootstrap min版本。因此，如果我引用两个文件，则请求将为两个。所以我怎么能把它做成一个文件呢。因此，只有一个请求。

就像我检查文件大小约为kb并在不到1或2秒的时间内处理请求一样，例如chrome dev工具显示了加载时间，它也同时加载了两个文件。

但是我如何使用webpack捆绑这两个库并获得一个我可以在我的应用程序中引用的文件。

我是webpack的初学者

Answer 1

您需要将它们导入到入口点文件中，然后Webpack将处理捆绑。在您使用React时，我假设您具有基本的命令行技能。

您可以阅读Getting Started guide，该文件将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的文件。这是您的entry point，除非另行配置，否则Webpack将寻找该文件。像这样导入库：

import $ from 'jquery'
import 'bootstrap'

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

然后使用npx运行Webpack：

npx webpack

应在包含捆绑代码的名为main.js的文件夹中创建名为dist的文件。这是您的output文件。您可以在HTML文件中使用<script>标签来加载此JavaScript：

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

到达这里后，您可以探索更高级的内容，例如分别导入Bootstrap组件，最小化代码，多个包，编译TypeScript等。

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

Answer 2

优良作法是为应用程序逻辑和外部库保留两个独立的包，这可以通过以下代码在webpack中实现，

app.js-应用索引文件，

vendors.js-导入此文件中的所有外部库

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

要获取单个文件，请在app.js文件内导入vendors.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。

捆绑多个js文件

3 个答案: