Question

我正在努力使Webpack 4成为一个中大型（MVC）网站。

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

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。猫头鹰传送带（和其他供应商脚本）也可以这样说

此外，如果我只是这样做：'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的需求。它足够精致和精致，可以适应您的创作风格。

Webpack 4引用npm供应商脚本

1 个答案: