Skip to content

Instantly share code, notes, and snippets.

@TheLarkInn
Last active June 7, 2018 13:33
Show Gist options
  • Save TheLarkInn/3fab18166cb4f122bb6a0d829898d7ae to your computer and use it in GitHub Desktop.
Save TheLarkInn/3fab18166cb4f122bb6a0d829898d7ae to your computer and use it in GitHub Desktop.
Understanding some CommonsChunksPlugin teqniques

When you use the names property in the CommonsChunkPlugin({}) and pass an array as the value, webpack converts what is seen below:

      new webpack.optimize.CommonsChunkPlugin({
        names: ['app', 'vendor', 'manifest'],  // creating manifest.js 
        minChunks: Infinity
      })

Into:

      new webpack.optimize.CommonsChunkPlugin({
        name: 'app', 
        minChunks: Infinity
      })
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
        minChunks: Infinity
      })
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',  // creating manifest.js 
        minChunks: Infinity // <=== since there is no 'manifest' chunk (there is no `manifest` key in the entrys object) 
                            // this moves the webpack bootstrap code into its own bundle. all other bundles are accesed with jsonP
      })

The name property for this plugin refers to according to the webpack documentation:

The chunk name of the commons chunk. An existing chunk can be selected by passing a name of an existing chunk.

Since there is no entry chunk name manifest, AND since minChunks is set to Infinity, this will extract the webpack bootstrap logic into a separate file, and will jsonP any other modules as it loads into the browser.

Without looking at where those additional bundles are being used, my only guess is that they are lazily loaded on that page, or used in spearate pages for rendering at another time.

import webpack from 'webpack';
import config from 'config';
import BundleTracker from 'webpack-bundle-tracker';
import AssetsPlugin from 'assets-webpack-plugin';
import path from 'path';
import yamljs from 'yamljs';
var env = process.env.NODE_ENV;
var Config = yamljs.load(path.resolve(__dirname, "config/application.yml"));
var cdn = Config.cdn_path;
var manifest = (function() {
try {
return require(path.resolve(__dirname, "../../") + '/manifest.json');
} catch (e) {
return {};
}
})()
var autoprefixer = require('autoprefixer');
var precss = require('precss');
const paths = config.get('utils_paths');
const webpackConfig = {
name: 'app',
target: 'web',
entry: {
app: [
paths.project(config.get('dir_src')) + '/app.js'
],
homeView: [
paths.project(config.get('dir_src')) + '/views/homeView.js'
],
resaleDedicatedView: [
paths.project(config.get('dir_src')) + '/views/resaleDedicatedView.js'
],
projectsDedicatedView: [
paths.project(config.get('dir_src')) + '/views/projectsDedicatedView.js'
],
searchView: [
paths.project(config.get('dir_src')) + '/views/searchView.js'
],
loginView: [
paths.project(config.get('dir_src')) + '/views/loginView.js'
],
vouchersListing: [
paths.project(config.get('dir_src')) + '/views/vouchers/vouchersListing.js'
],
userProfileView: [
paths.project(config.get('dir_src')) + '/views/userProfileView.js'
],
shortlistedView: [
paths.project(config.get('dir_src')) + '/views/shortlistedView.js'
],
contactedView: [
paths.project(config.get('dir_src')) + '/views/contactedView.js'
],
savedSearchView: [
paths.project(config.get('dir_src')) + '/views/savedSearchView.js'
],
editProfileView: [
paths.project(config.get('dir_src')) + '/views/editProfileView.js'
],
'pushNotificationsView': [
paths.project(config.get('dir_src')) + '/views/pushNotificationsView.js'
],
'localitySelect': [
paths.project(config.get('dir_src')) + '/components/localitySelect.js'
],
'appBannerView': [
paths.project(config.get('dir_src')) + '/views/appBannerView.js'
],
'propertyValuation': [
paths.project(config.get('dir_src')) + '/views/propertyValuation.js'
],
'propertyReport': [
paths.project(config.get('dir_src')) + '/views/propertyReport.js'
],
'bottomNotification': [
paths.project(config.get('dir_src')) + '/views/bottomNotification.js'
],
'offlineView': [
paths.project(config.get('dir_src')) + '/views/offlineView.js'
],
vendor: config.get('vendor_dependencies')
},
output: {
filename: '[name].js',
chunkFilename: '[name].js',
path: paths.project(config.get('dir_dist')),
publicPath: cdn + '/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['app', 'vendor', 'manifest'], // creating manifest.js
minChunks: Infinity
}),
new webpack.DefinePlugin(config.get('globals')),
new webpack.optimize.OccurrenceOrderPlugin(),
new BundleTracker(),
new AssetsPlugin()
],
resolve: {
extensions: ['', '.js', '.jsx'],
alias: config.get('utils_aliases')
},
module: {
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: ['transform-runtime', 'add-module-exports'],
presets: ['es2015', 'react', 'stage-0'],
}
}, {
test: /\w*\.ttf(\?.*)?$/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "application/octet-stream", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\w*\.woff(\?.*)?$/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "application/font-woff", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\w*\.woff2(\?.*)?$/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "application/font-woff2", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\w*\.eot(\?.*)?$/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "application/octet-stream", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\w*\.svg(\?.*)?$/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "image/svg+xml", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\.png$/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "image/png", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\.jpg$/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "image/jpg", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\.gif/,
loader: path.resolve(__dirname, "hash-loader"),
query: { mimetype: "image/gif", cdn_base: cdn, manifest: manifest, env: env }
}, {
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader'
]
},
]
},
sassLoader: {
includePaths: paths.src('styles')
},
postcss: function() {
return [precss, autoprefixer];
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment