问题
I've been using mostly vanilla Webpack configuration with Vue.js. I've been trying to trackdown what broke it, but my fingerprinting doesn't seem to work well anymore. Everytime I update one of the components, a pack would get reloaded, as you'd expect.
The problem is that on production, browser doesn't seem to know about it anymore. So it will try to use the old pack, not find it and crash my app. Only by clearing the cache to make it download all packs again, it will get the pack with the new fingerprint.
Webpack configuration
const webpack = require('webpack')
const { environment } = require('@rails/webpacker')
const vue = require('./loaders/vue')
const { VueLoaderPlugin } = require('vue-loader')
const additionalConfig = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: 3,
}),
],
module: {
rules: [
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
]
},
output: {
sourceMapFilename: '[name].js.map',
},
devtool: 'source-map',
}
environment.config.merge(additionalConfig);
environment.loaders.append('vue', vue)
module.exports = environment
Rails seem to fingerprint everything by default, hence I don't have a manual setup in output
. But I did try that as well, without noticeable difference.
One of the packs
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';
import 'flexboxgrid/css/flexboxgrid.css';
import 'ionicons/dist/scss/ionicons.scss';
import Vue from 'vue/dist/vue.esm';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
import UserOnboarding from '../components/sessions/TheOnboarding.vue';
import TopNavigation from '../components/navigation/TheTopNavigation.vue';
import { store } from '../store';
Vue.use(ElementUI, { locale });
const app = new Vue({
el: '#app',
store,
mounted() {
var selector = document.querySelector("#app");
if (selector) {
store.commit('base_states/authenticate',
JSON.parse(selector.dataset.signedIn)
);
}
},
components: { UserOnboarding, TopNavigation },
});
Exception example
ActionController::RoutingError: No route matches [GET] "/packs/landing_page-dbab12fce266dd6c1529.js"
来源:https://stackoverflow.com/questions/55091578/rails-webpack-fingerprinting-not-working-as-intended