Okay, I will try to give how much information as I can:
This is my webpack.common.js:
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
function resolvePath(dir) {
return path.join(__dirname, '../', dir);
}
const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';
const isCordova = target === 'cordova';
module.exports = {
entry: [
'babel-polyfill',
'./src/webpack.entry.js',
],
output: {
path: resolvePath(isCordova ? 'cordova/www' : 'www'),
filename: 'app.js',
publicPath: '',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'@': resolvePath('src'),
'@app': resolvePath('src/app'),
'@locales': resolvePath('src/app/locales'),
'@properties': resolvePath('src/app/properties'),
'@services': resolvePath('src/app/services'),
'@helpers': resolvePath('src/app/services/helpers'),
"@cordova": resolvePath('src/app/cordova'),
'@pages': resolvePath('src/pages'),
"@shared": resolvePath('src/shared'),
"@forms": resolvePath('src/shared/forms'),
"@structure": resolvePath('src/structure'),
"@assets": resolvePath('src/assets'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
include: [
resolvePath('src'),
resolvePath('node_modules/framework7'),
resolvePath('node_modules/framework7-react'),
resolvePath('node_modules/template7'),
resolvePath('node_modules/dom7'),
resolvePath('node_modules/ssr-window'),
],
},
{
test: /\.css$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
],
},
{
test: /\.styl(us)?$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'stylus-loader',
],
},
{
test: /\.less$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'less-loader',
],
},
{
test: /\.(sa|sc)ss$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]',
},
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[ext]',
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html',
inject: true,
minify: env === 'production' ? {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} : false,
}),
new MiniCssExtractPlugin({
filename: 'app/app.css',
}),
new CopyWebpackPlugin([
{
from: resolvePath('static'),
to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
},
])
],
};
This is my webpack.dev.js:
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.common')
const CleanPlugin = require('./webpack-plugins/clean-plugin/clean-plugin-class')
let target = process.env.TARGET || 'web'
let config = {
...require('../config/default.json'),
...require('../config/development.json')
}
module.exports = merge(common, {
mode: 'development',
devServer: {
hot: true,
open: true,
compress: true,
contentBase: '/www/',
disableHostCheck: true,
watchOptions: {
poll: true,
},
},
// devtool: 'eval-source-map',
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development"),
"process.env.TARGET": JSON.stringify(target),
config: JSON.stringify(config)
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new CleanPlugin(target)
]
})
This is my webpack.prod.js file:
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
let target = process.env.TARGET || 'web'
let config = {
...require('../config/default.json')
}
if (process.env.NODE_ENV=="staging") {
config = {
...config,
...require('../config/staging.json')
}
}
if (process.env.NODE_ENV=="production") {
config = {
...config,
...require('../config/production.json')
}
}
module.exports = merge(common, {
mode: 'production',
devtool: 'eval-source-map',
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production"),
"process.env.TARGET": JSON.stringify(target),
config: JSON.stringify(config)
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
},
},
sourceMap: true,
parallel: true,
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
map: { inline: false },
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
]
});
This is my webpack.entry.js file in the src dir:
// Import React and ReactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// Import Framework7
import Framework7 from 'framework7/framework7.esm.bundle.js'
// Import Framework7-React Plugin
import Framework7React from 'framework7-react'
// Import App Component
import App from '@app/app-class'
// Icons
import '@assets/css/icons.css'
import '@fortawesome/fontawesome-free/css/all.css'
// RootScope
import RootScope from '@properties/rootScope'
// Init F7 React Plugin
Framework7.use(Framework7React)
RootScope.language = window.localStorage.getItem("language") || navigator.language
if (RootScope.language!="he-IL" && RootScope.language!="en-US") RootScope.language = "he-IL"
localStorage.setItem("language", RootScope.language)
// RootScope.language = "he-IL"
if (RootScope.language=="he-IL") {
import('framework7/css/framework7.bundle.rtl.css').then(() => {
import('@locales/he-IL/translations.json').then(module => {
import('@app/app.scss').then(() => {
RootScope.t = module.default
initReactApp()
})
})
})
}
if (RootScope.language=="en-US") {
import('framework7/css/framework7.bundle.css').then(() => {
import('@locales/en-US/translations.json').then(module => {
import('@app/app.scss').then(() => {
RootScope.t = module.default
initReactApp()
})
})
})
}
function initReactApp() {
// Mount React App
ReactDOM.render(
React.createElement(App),
document.getElementById('app'),
)
}
if (process.env.TARGET!="cordova" && process.env.NODE_ENV=="development") {
module.hot.accept()
}
Now thats the files that have been generated to the www dir:
Before I commented the devtool in the webpack config files, it was 17mb now its 6mb which is still alot.
There are the consumptions:
import React from 'react' // 100kb
import ReactDOM from 'react-dom' // 800kb
import Framework7 from 'framework7/framework7.esm.bundle.js' // 2.2mb
import Framework7React from 'framework7-react' // 1.3mb
// both take arround 2mb:
import '@assets/css/icons.css'
import '@fortawesome/fontawesome-free/css/all.css'
There no any heavy images or media
What do I miss in here?
