npm - Webpack 4 引用 npm 供应商脚本
问题描述
我正在尝试为中大型 (MVC) 网站了解 Webpack 4。
对于解决方案,我想使用以下基本供应商脚本/样式:
- jQuery vLatest 缩小版
- Bootstrap,但只有网格,没有 javascript 或其他任何东西
该站点由多个彼此不同的模板组成。有些人可能有一个图片库,我想在其中使用 Owl Carousel vLatest 等等。
据我了解,供应商捆绑包应仅包含整个站点使用的脚本/样式,因此,猫头鹰轮播脚本/样式不应成为供应商脚本的一部分,因为它仅用于一个,也许两个特定的模板。
我已经通过 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 的?:-)
提前致谢。
解决方案
您可以使用{ resolve }
配置别名:
{
resolve: {
alias: {
'jquery': require.resolve('jquery/jquery.min.js')
}
}
}
但是,我会提醒您首先关注获得适合开发的可行构建,然后根据需要增强配置以优化生产。例如,在开发过程中,您希望通过良好的源映射将所有源全部包含在内。当您到达发布点时,使用环境变量之类的东西来引入一个标志,该标志将强制执行必要的配置。
不,没有必要为特定的供应商来源创建入口点。这让人想起过去的做法。您应该创建单独的入口点,以便在逻辑上将您的大型代码库拆分为不同的包,例如:公共 Web、管理应用程序、客户应用程序,如果您需要这样做的话。
此外,不要花太多时间创建入口点来对供应商来源等进行分组。从开发人员的角度来看,按照您的意愿编写您的模块,向他们要求他们所依赖的内容,然后使用 webpack { optimize.minimizer }
、其他缩小插件及其依赖图启发式方法来创建必要的块{ optimize.splitChunks }
。
简短的回答是,这对 webpack 来说已经很长时间了:不要改变你编写和组织源代码的方式来满足 webpack。它足够精致和精致,可以适应您的创作风格。
推荐阅读
- azure - Azure Servicebus 队列延迟接收有序消息
- java - 使用 AttributeConverter 转换为 UUID 会导致“没有 JDBC 类型的方言映射”异常
- r - 如何将函数应用于列表中的向量
- api - 如何在 Knox Basic Auth 的标头中转发凭据
- redirect - OPLON LBL ADC 当 http 请求位置 URL 以“/”结尾时,使用相同的 URL 重定向,没有最后一个“/”,响应代码为 301
- c++ - 自定义分配器 - 与 std::vector 对比,以及奇怪的测试结果
- javascript - 如何在javascript中模拟库中的函数
- ansible - 如何使用ansible检查raid阵列中的驱动器是否失败
- java - 根据特定条件对数组进行排序
- sql - 如何在elasticsearch中通过多字段实现sum(field) group?