У меня есть веб-приложение, которое использует следующий технический стек:
- Apache, работающий в инстансе Amazon EC2
- Django, обслуживающий через WSGI
- Javascript скомпилировано через webpack / babel
В настольной среде все отлично работает, но на мобильных устройствах она полностью не работает. Когда я перехожу на домашнюю страницу, мобильные браузеры пытаются начать загрузку, а не обслуживать страницу.
Я несколько дней бился головой о стену, пытаясь понять, что происходит, но у меня нет любые ведет.
Вот мой webpack.config. js, так как я думаю, что это наиболее вероятное место для проблемы:
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const SentryCliPlugin = require('@sentry/webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const hotReload = process.env.HOT_RELOAD === '1';
const styleRule = {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { sourceMap: true } },
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer({
overrideBrowserslist: [
'last 2 Chrome versions',
'not Chrome < 60',
'last 2 Safari versions',
'not Safari < 10.1',
'last 2 iOS versions',
'not iOS < 10.3',
'last 2 Firefox versions',
'not Firefox < 54',
'last 2 Edge versions',
'not Edge < 15',
],
})],
},
},
'sass-loader',
],
};
const jsRule = {
test: /\.js$/,
include: [
path.resolve('./'),
],
exclude: [/node_modules/, /lib/],
use: [
'babel-loader',
{
loader: 'eslint-loader',
options: {
fix: true,
presets: ['@babel/preset-es2015'],
},
},
],
};
const assetRule = {
test: /.(jpg|png|woff(2)?|eot|ttf|svg)$/,
loader: 'file-loader',
};
const plugins = [
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
jQuery: 'jquery',
$: 'jquery',
}),
new BundleTracker({ filename: './webpack-stats.json' }),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
// new CleanWebpackPlugin(['./static/dist']),
new CopyWebpackPlugin([
{ from: './static/src/images/**/*', to: path.resolve('./static/dist/images/[name].[ext]'), toType: 'template' },
]),
];
if (devMode) {
styleRule.use = ['css-hot-loader', ...styleRule.use];
} else {
plugins.push(
new webpack.EnvironmentPlugin(['NODE_ENV']),
);
if (process.env.SENTRY_DSN) {
plugins.push(
new SentryCliPlugin({
include: '.',
release: process.env.SOURCE_VERSION,
ignore: ['node_modules', 'webpack.config.js'],
}),
);
}
}
module.exports = {
context: __dirname,
entry: {
app: './wzapp/global_web_source/app.js',
main: './main/web_src/app.js',
coop: './coop/web_src/app.js',
wdns: './wdns/web_src/app.js',
},
output: {
path: path.resolve('./static/dist/'),
filename: '[name]-[hash].js',
publicPath: hotReload ? 'https://localhost:8080/' : '',
},
devtool: devMode ? 'cheap-eval-source-map' : 'source-map',
devServer: {
hot: true,
quiet: false,
https: {
key: 'server.key',
cert: 'server.crt',
},
headers: { 'Access-Control-Allow-Origin': '*' },
},
module: { rules: [jsRule, styleRule, assetRule] },
plugins,
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true, // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}),
],
splitChunks: {
cacheGroups: {
commons: {
name: 'commons',
chunks: 'initial',
minChunks: 2,
},
},
},
// splitChunks: {
// cacheGroups: {
// commons: {
// test: /[\\/]node_modules[\\/]/,
// name: 'vendor',
// chunks: 'initial',
// },
// }
// }
},
};