vue-cli: vue.config.js - configureWebpack: optimization problem
Version
3.4.0
Reproduction link
https://github.com/katonada/vue.config/blob/master/vue.config.js
Environment info
System:
OS: Windows 10
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 10.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
@kazupon/vue-i18n-loader: ^0.3.0 => 0.3.0
@vue/babel-helper-vue-jsx-merge-props: 1.0.0-beta.2
@vue/babel-plugin-transform-vue-jsx: 1.0.0-beta.2
@vue/babel-preset-app: 3.4.0
@vue/babel-preset-jsx: 1.0.0-beta.2
@vue/babel-sugar-functional-vue: 1.0.0-beta.2
@vue/babel-sugar-inject-h: 1.0.0-beta.2
@vue/babel-sugar-v-model: 1.0.0-beta.2
@vue/babel-sugar-v-on: 1.0.0-beta.2
@vue/cli-overlay: 3.4.0
@vue/cli-plugin-babel: ^3.4.0 => 3.4.0
@vue/cli-plugin-e2e-cypress: ^3.4.0 => 3.4.0
@vue/cli-plugin-eslint: ^3.4.0 => 3.4.0
@vue/cli-plugin-unit-mocha: ^3.4.0 => 3.4.0
@vue/cli-service: ^3.4.0 => 3.4.0
@vue/cli-shared-utils: 3.4.0
@vue/component-compiler-utils: 2.5.2
@vue/eslint-config-prettier: ^4.0.1 => 4.0.1
@vue/eslint-config-standard: ^4.0.0 => 4.0.0
@vue/preload-webpack-plugin: 1.1.0
@vue/test-utils: ^1.0.0-beta.29 => 1.0.0-beta.29
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: 4.7.1
vue: ^2.6.5 => 2.6.5
vue-cli-plugin-django: ^0.1.3 => 0.1.3
vue-cli-plugin-i18n: ^0.5.1 => 0.5.1
vue-cookie: ^1.1.4 => 1.1.4
vue-dayjs: ^1.0.2 => 1.0.2
vue-eslint-parser: 2.0.3
vue-hot-reload-api: 2.3.1
vue-i18n: ^8.8.1 => 8.8.1
vue-intersect: ^1.1.2 => 1.1.2
vue-line-clamp: ^1.3.2 => 1.3.2
vue-loader: 15.6.2
vue-meta: 1.5.8 => 1.5.8
vue-mq: ^1.0.1 => 1.0.1
vue-nprogress: ^0.1.5 => 0.1.5
vue-router: ^3.0.2 => 3.0.2
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.5 => 2.6.5
vue-template-es2015-compiler: 1.8.2
vue-text-dot: ^1.0.0 => 1.0.0
vue-timers: ^1.10.0 => 1.10.0
vue-tiny-slider: ^0.1.31 => 0.1.31
vue-video-player: ^5.0.2 => 5.0.2
vuebar: 0.0.20 => 0.0.20
vuex: ^3.1.0 => 3.1.0
npmGlobalPackages:
@vue/cli: Not Found
Steps to reproduce
When uncomment optimization: { splitChunks: { …}} part, build works, serve is working, no errors shown but the project in browser shows blank screen and console shows no error.
What is expected?
The project works without the optimization part as it should. It’s expected to work with optimization too.
What is actually happening?
With optimization, there is blank screen in browser and no errors, network and all in dev tools
By applying any SplitChunksPlugin rules that blank screen is happening 😦 e.g. splitChunks: { chunks: ‘all’ } Webpack optimization rules (https://webpack.js.org/configuration/optimization/). SplitChunksPlugin https://webpack.js.org/plugins/split-chunks-plugin/
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 16 (2 by maintainers)
Try by adding
chunks: allto your page.indexthis solved my problem
@sharvilak11 I think I’ve found a solution at least to my problem (still investigating but looks promising). So instead of defining
pagesin vue.config.js I’m running a separate build/serve script providing an entry file and destination folder:For multiple pages you would probably need some script that runs build script for each page instead of putting them into packages.json scripts
The other problem that you may find it’s that all chunks (including vendor ones) are located in separate folders (
/distand/dist/loginin my case), which means that they cannot be cached together, however some of them have the same filename (for examplevendor.axios.bfd77495.jsis located both in/distand/dist/loginfolders) so I think it should be possible to find duplicates, removing them from/dist/loginfolder and telling the server to serve the cached version from /dist. I’m not working on this though as in my case it’s not a priorityHope it helps someone with the similar issue