Webpack 4 引用 npm 供应商脚本

Question

我正在尝试为中大型 (MVC) 网站了解 Webpack 4。

对于解决方案，我想使用以下基本供应商脚本/样式：

• jQuery vLatest 缩小版
• 引导，但只有网格，没有 javascript 或其他任何东西

该网站由多个彼此不同的模板组成。有些人可能有一个图片库，我想在其中使用 Owl Carousel vLatest 等等。

据我了解，供应商捆绑包应仅包含整个站点使用的脚本/样式，因此，即 Owl Carousel 脚本/样式不应成为供应商脚本的一部分，因为它仅用于一个，也许是两个特定的模板。

我已经通过 npm 安装了 jQuery 和 Bootstrap，所以它们位于 node_modules 文件夹中。问题是：我如何告诉 Webpack 在供应商包中使用缩小版的 jQuery？我如何告诉它只使用 Bootstrap 中的网格组件？那么其他第三方脚本/样式呢，是否应该将它们作为自己的条目包含在内？

我的 webpack.config.js 入口文件如下所示：

entry: {
    'mysite.bundle.css': './scripts/webpack-entries/mysite.styles.js',        
    'mysite.bundle.js': glob.sync('./scripts/mysite/*.js'),        
    'vendor.bundle.js': [
        './node_modules/jquery/dist/jquery.min.js'
    ],
    'vendor.bundle.css': [
        './node_modules/bootstrap/scss/bootstrap-grid.scss'
    ],        
}

对此感到奇怪的是，我也可以直接在我的视图中引用 jquery.min.js 并直接在我的 .scss 文件中导入 bootstrap-grid.scss。 Owl 轮播（和其他供应商脚本）也可以这样说

另外，如果我这样做：'vendor.bundle.js': ['jquery'] 加载整个非缩小 jQuery 库而不是缩小版本。

您究竟是如何以这种方式使用 Webpack 和 NPM 的？ :-)

提前致谢。

Answer 1

您可以使用{ resolve }来配置别名：

{
  resolve: {
    alias: {
      'jquery': require.resolve('jquery/jquery.min.js')
    }
  }
}

但是，我会提醒您首先关注获得适合开发的可行构建，然后根据需要增强配置以优化生产。例如，在开发过程中，您希望通过良好的源映射将所有源全部包含在内。当您到达发布点时，使用 Environment Variables 之类的东西来引入一个标志，该标志将强制执行必要的配置。

不，没有必要为特定的供应商来源创建入口点。这让人想起过去的做法。您应该创建单独的入口点，以便在逻辑上将您的大型代码库拆分为不同的包，例如：公共网络、管理应用程序、客户应用程序，如果您需要这样做的话。

另外，不要花太多时间创建入口点来对供应商来源等进行分组。从开发人员的角度编写你的模块，从他们那里获取它们所依赖的内容，然后使用 webpack { optimize.minimizer }、其他缩小插件和依赖图启发式方法来使用 { optimize.splitChunks } 创建必要的块。

简短的回答是，这对 webpack 来说已经很久了：不要改变你编写和组织源代码的方式来满足 webpack。它足够精致和精致，可以适应您的创作风格。