1

我在配置 webpack4 以正确捆绑共享依赖项时遇到困难。

我的应用程序中有两个页面（Page1 和 Page2）。两者都需要bootstrap，jquery以及一个名为core.

Page 2 需要相同但还需要一个名为my-appand的自定义 JavaScript 应用程序lodash。

由于我的core应用程序将包含在所有页面中，因此我希望拥有jquery和bootstrap在同一个包中。

由于lodash只需要运行页面my-app，我想在my-app包中包含该依赖项。

所以我像这样设置我的应用程序：

webpack.config.js

const path = require('path');
const webpack = require('webpack');


module.exports = {
  entry: {
    'core': './src/core/index.js',
    'my-app': './src/my-app/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery',
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
  ],
  mode: 'development',
}

page1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page1</title>

    <script src="dist/core.bundle.js"></script>
  </head>
  <body>
    <h1>Page1</h1>
    <span id="test"></span>
  </body>
  <script>
    $(document).ready(function() {
      $('#test').text('jQuery Works!');
    });
  </script>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page1</title>

    <script src="dist/core.bundle.js"></script>
    <script src="dist/my-app.bundle.js"></script>

  </head>
  <body>
    <h1>Page2</h1>
    <span id="test"></span>
  </body>
  <script>
    $(document).ready(function() {
      $('#test').text('jQuery Works!');
    });
  </script>
</html>

（完整项目：https ://github.com/LondonAppDev/webpack-split-example ）

当我运行时npx webpack，它会创建core.bundle.js，my-app.bundle.js但是这两个都包括jquery.

是否可以将所有“全局”依赖项放入core.bundle.js？

4

1 回答 1

4

这里只需要记住一件事，使用 webpack 4，您不会将供应商脚本添加为 webpack.config 的条目，而只是将真正的条目脚本添加到您的应用程序中。WP 将使用默认设置为您的应用程序创建优化的捆绑输出。

您必须将供应商缓存组添加到您的配置中，以便提取jQuery, Lodash, Bootstrap,Popper到单独的包中：

 optimization: {
    splitChunks: {
      cacheGroups: {       
        vendor: {
          test: /node_modules/,
          name: "vendor",
          chunks: "all", 
          enforce: true
        }
      }
    }
  },
于 2018-04-05T09:30:55.403 回答