My current app is based on Vue 2 Single File Components and Webpack 4. The build runs fine in both development and production modes. I updated Webpack from 4 to 5. Right now the development and production builds both run without errors. If I load the production build in the web browser the website works without any issues.
The issue is with the development build. Although the build runs fine, webchunks fails to load. On a.vue if I load b.vue using a normal import the page renders without any issues. If I try to load b.vue using the below webpackChunkName, I get a 403 error loading the chunk.
components {
b = ()=> import(/* webpackChunkName: "b" */ './b.vue');
}
I've spent a week trying to get this to work and can use any help I can get
package.json
{
"name": "my-webpack",
"version": "1.0.0",
"description": "my app",
"repository": {
"type": "git"
},
"main": "index.js",
"scripts": {
"build": "NODE_ENV=production NODE_OPTIONS=--max-old-space-size=2048 POSTCSS=true JS=true BUNDLEJS=false BUNDLECSS=true BUNDLEVUE=true webpack --progress",
"build-dev": "NODE_ENV=development NODE_OPTIONS=\"--max-old-space-size=2048 --trace-deprecation\" POSTCSS=true JS=true BUNDLEJS=false BUNDLECSS=true BUNDLEVUE=true webpack --progress"
},
"author": "my app",
"devDependencies": {
"@babel/core": "^7.22.5",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.22.5",
"@intlify/vue-i18n-loader": "^1.1.0",
"autoprefixer": "^10.4.14",
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.0",
"lodash.clonedeep": "^4.5.0",
"mini-css-extract-plugin": "^2.7.6",
"postcss": "^8.4.24",
"postcss-import": "^15.1.0",
"postcss-inherit": "^4.1.0",
"postcss-loader": "^7.3.3",
"postcss-mixins": "^9.0.4",
"postcss-nested": "^6.0.1",
"postcss-preset-env": "^8.4.2",
"postcss-simple-vars": "^7.0.1",
"regenerator-runtime": "^0.13.11",
"sass": "^1.63.3",
"sass-loader": "^13.3.2",
"svg-inline-loader": "^0.8.2",
"svg-url-loader": "^8.0.0",
"tailwindcss": "^1.9.6",
"terser": "^5.18.0",
"terser-webpack-plugin": "^5.3.9",
"url-loader": "^4.1.1",
"vue-loader": "^15.10.1",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.88.0",
"webpack-cli": "^5.1.4",
"webpack-merge-and-include-globally": "^2.3.4",
"worker-plugin": "^5.0.1"
},
"devDependenciesCommentedOut": {
"rtlcss-webpack-plugin": "^4.0.3",
"vue-directive-tooltip": "^1.6.3"
},
"dependencies": {
"@fingerprintjs/fingerprintjs": "3.3.6",
"@fingerprintjs/fingerprintjs-pro": "3.8.3",
"@sentry/browser": "^5.30.0",
"@sentry/integrations": "^5.30.0",
"@sentry/tracing": "^5.30.0",
"buefy": "^0.9.23",
"bulma": "^0.9.4",
"cleave.js": "^1.6.0",
"clipboard": "^2.0.11",
"core-js": "^3.30.2",
"debounce": "^1.2.1",
"handlebars": "^4.7.7",
"jquery": "^1.12.4",
"jquery.Jcrop.js": "^0.9.12",
"js-cookie": "^2.2.1",
"lodash": "^4.17.21",
"node-polyfill-webpack-plugin": "^2.0.1",
"select2": "^4.0.13",
"sortablejs": "^1.15.0",
"stickybits": "^3.7.11",
"vee-validate": "^3.4.15",
"vue": "^2.7.14",
"vue-i18n": "^8.28.2",
"vue-recaptcha": "^1.3.0",
"vue-router": "^3.6.5"
"vue-speedometer": "^1.8.0",
"vue-tour": "^1.6.0",
"vue2-google-maps": "^0.10.7",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
}
}
webpack.config.js
/* jshint esversion: 6 */
'use strict'
const { VueLoaderPlugin } = require('vue-loader');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const path = require('path');
const os = require('os');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WorkerPlugin = require('worker-plugin');
const webpack = require('webpack');
const CopyPlugin = require("copy-webpack-plugin");
const postcssOptions = require('./postcss.config.js');
let vueCompileConfig = {
mode: process.env.NODE_ENV,
devtool: 'source-map',
entry: bundleConfig.vueFiles,
output: {
filename: '[name].bundle.min.js',
path: path.resolve(__dirname, '../dist/vuejs'),
publicPath: publicPathPrefix+'/dist/vuejs/',
chunkFilename: '[name].min.js?t=[contenthash]',
globalObject: "this"
},
target: ['web', 'es5'], // transpiling to es5 to partly support older browser like IE11
optimization: {
chunkIds: "named",
emitOnErrors: true,
},
externals: {
vue: 'Vue',
},
resolve: {
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'],
alias: {
vue: 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '../')
}
},
watchOptions: {
poll: 1000, // Check for changes every second
ignored: /node_modules/
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
"cacheDirectory": true,
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"last 3 versions",
"ie >= 9",
"firefox >= 37",
"chrome >= 48",
"safari >= 10",
"ios_saf >= 10"
]
},
"useBuiltIns": "entry",
"corejs": 3
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}
},
{
test: /\.(png|jpg|gif)/,
type: 'asset/resource',
generator: {
filename: './fonts/[name][ext]'
}
},
{
test: /\.svg$/,
oneOf: [{
resourceQuery: /inline/,
loader: 'svg-url-loader',
},
{
resourceQuery: /background/,
loader: 'svg-url-loader',
},
{
resourceQuery: /inline/,
loader: 'svg-url-loader',
},
{
loader: 'svg-inline-loader',
options: {
name: '[name]-[contenthash][ext]',
},
}
]
},
{
test: /\.vue$/,
use: 'vue-loader'
},
{
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
loader: '@intlify/vue-i18n-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.(pcss|postcss)$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: postcssOptions
}
},
]
},
]
},
plugins: [
new webpack.EnvironmentPlugin({
'BUILD': 'web'
}),
new NodePolyfillPlugin(),
new WorkerPlugin(),
new VueLoaderPlugin(),
new CompressionPlugin({
test: /\.js(\?.*)?$/i,
algorithm: "gzip",
filename: "[path][base].gz"
}),
]
};