javascript - Webpack 4 splitChunks 未在浏览器中执行
问题描述
我有这个 webpack 4 的配置:
const webpack = require('webpack');
const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: "development",
entry: {
main: './js/main.js',
login: './js/apps/login/login_app.js',
},
output: {
path: __dirname + '/dist',
filename: '[name].[hash].js'
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
enforce: true,
priority: 1,
test(module, chunks) {
const name = module.nameForCondition && module.nameForCondition();
return chunks.some(chunk => chunk.name === 'main' && /node_modules/.test(name));
}
},
main: {
name: 'main',
chunks: 'all',
enforce: true,
priority: 0,
test(module, chunks) {
return chunks.some(chunk => chunk.name === 'main');
}
},
login: {
name: 'login',
chunks: 'all',
enforce: true,
priority: 0,
test(module, chunks) {
return chunks.some(chunk => chunk.name === 'login');
}
},
}
}
},
resolve: {
extensions: ['*', '.js', '.jsx'],
modules: ['js', 'node_modules'],
alias: {
"backbone": path.join(__dirname, 'node_modules', 'backbone', 'backbone'),
"spin.jquery": 'lib/spin.jquery',
"datetimepicker": 'lib/datetimepicker',
"common-behavior": 'common/common_behavior',
"utilities": 'common/utilities',
"storage": 'models/storage',
"local_storage": 'local_storage',
"session_storage": 'session_storage',
"cookie_storage": 'cookie_storage',
"head_app": 'apps/head/head_app',
"pages": 'pages',
"header_app": 'apps/header/header_app',
"footer_app": 'apps/footer/footer_app',
"views": 'common/views',
"search_activity_app": 'apps/search/search_activity_app',
"calendar": 'components/calendar/calendar',
"calendar-render": 'components/calendar/calendar.render',
"calendar-costants": 'components/calendar/calendar.costants',
"components-utils": 'components/utils',
"dropdown": "components/dropdown/dropdown",
"dropdown-render": "components/dropdown/dropdown.render",
"dropdown-constants": "components/dropdown/dropdown.constants",
"handlebars": 'handlebars/dist/handlebars.min.js',
"bootstrap-datetimepicker": 'lib/bootstrap-datetimepicker.min',
"bootstrap-select": "lib/bootstrap-select",
"jasny-bootstrap": "jasny-bootstrap/dist/js/jasny-bootstrap.min.js",
"card": 'lib/jquery.card',
}
},
module: {
rules: [
{ test: /pages/, loader: 'imports-loader?head_app' },
{ test: /views/, loader: 'imports-loader?head_app' },
{ test: /footer_app/, loader: 'imports-loader?head_app' },
{ test: /header_app/, loader: 'imports-loader?head_app' },
{ test: /spin.jquery/, loader: 'imports-loader?jquery,spin' },
{ test: /bootstrap-datetimepicker/, loader: 'imports-loader?bootstrap,moment' },
{ test: /bootstrap-select/, loader: 'imports-loader?bootstrap' },
{ test: /jasny-bootstrap/, loader: 'imports-loader?jquery,bootstrap' },
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
plugins: [
//new BundleAnalyzerPlugin()
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
生成这些文件:
main.ca06beb99f4c5bcd9ee2.js
vendors.ca06beb99f4c5bcd9ee2.js
login.ca06beb99f4c5bcd9ee2.js
但是如果我在我的页面中导入该js,则不会执行任何操作,在我的项目中,我不仅有登录页面,还有其他页面,并且使用路由器我只想动态加载特定的构建,例如:我访问/home
我要加载的页面home.js
等..
所以我的问题是:
- 为什么如果我导入主要和供应商在浏览器中没有任何反应?
- 使用这个 webpack 代码拆分,当路由匹配时,我可以只动态加载页面的构建吗?
- 所有页面代码都使用 node_modules 库,例如 login_app 使用一些 node_modules。这些节点模块是在哪里添加的?在供应商?在 login.js 中还是在另一个 vendor-login.js 中?什么是正确的方法以及如何实现它?
谢谢
解决方案
推荐阅读
- dart - 错误状态:从 addStream 添加项目时无法添加项目
- reactjs - Yield call(...) 不调用函数
- javascript - 更改响应式侧边菜单的位置
- laravel - 我不知道我是否正确下载了ffmpeg
- ios - 以编程方式创建 iTunes 沙盒测试器以进行自动化测试
- r - Shiny R 中的 Mongodb Query 使用响应式输入从数据库中获取数据
- javascript - 对象扩展运算符:设置要通过有效负载更新的属性
- nginx - nginx 返回特定端点的图像
- python - 将 .tei 文件转换为 .txt 文件
- javascript - Chrome 扩展中的 MutationObserver 脚本无法捕获更改