Guymestef
commented
6 years ago You are right. I'm using two webpack config files:
- webpack.config.vendor.js
const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = (env) => { const analyzeBundle = env && env.analyzeBundle; const extractCss = new ExtractTextPlugin('vendor.css'); return [{ stats: { modules: false }, resolve: { extensions: ['.js'] }, module: { rules: [{ test: /.(png|jpg|jpeg|gif|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }, { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'sass-loader' }] }) }, { test: /.less$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'less-loader' }] }) }, { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, { test: require.resolve('jquery'), use: [{ loader: 'expose-loader', query: 'jQuery' }, { loader: 'expose-loader', query: '$' }] }, { test: require.resolve('moment'), use: [{ loader: 'expose-loader', query: 'moment' }] }, { test: require.resolve('knockout'), use: [{ loader: 'expose-loader', query: 'ko' }] } ] }, entry: { vendor: [ 'popper.js', 'bootstrap', 'bootstrap/scss/bootstrap.scss', 'bootstrap-social', 'knockout', 'knockout-mapping', 'knockout-postbox', 'knockout.validation', 'event-source-polyfill', 'isomorphic-fetch', 'jquery',
'babel-polyfill',
'stacktrace-js',
'i18next',
'jquery-validation',
'jquery-validation/dist/additional-methods',
'jquery-validation-unobtrusive',
'css-toggle-switch/dist/toggle-switch.css',
'moment',
'tempusdominus-bootstrap-4',
'tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css',
'bootstrap-tagsinput',
'bootstrap-tagsinput/dist/bootstrap-tagsinput.less',
'font-awesome/less/font-awesome.less',
'd3',
'nvd3',
'nvd3/build/nv.d3.css',
'jquery-ui',
'jquery-ui/ui/widgets/draggable',
'jquery-ui-touch-punch',
'iscroll/build/iscroll-zoom',
'jquery.cookie',
'offline-js',
'offline-js/themes/offline-theme-chrome.css',
'file-size',
'jquery.complexify/jquery.complexify.banlist',
'jquery.complexify',
'jquery.payment',
'mangopay-cardregistration-js-kit',
'select2',
'select2/dist/css/select2.css',
'select2-bootstrap-theme/dist/select2-bootstrap.css',
'openlayers',
'openlayers/dist/ol.css',
'google-maps',
'clipboard',
'lightbox2',
'lightbox2/dist/css/lightbox.css',
'aos',
'aos/dist/aos.css',
'animate.css/animate.css',
'screenfull',
'dotdotdot',
'youtube-player',
'jquery-nearest'
]
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: '/dist/',
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
extractCss,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
moment: 'moment'
}), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
]
}];};
2. webpack.config.js
```javascript
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const {
GenerateSW
} = require('workbox-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: {
modules: false
},
entry: {
'main': ['./ClientApp/boot.js'].concat(isDevBuild ? ['./ClientApp/offline-simulate-ui.min.js'] : []),
'vendor.config.fr': './ClientApp/vendor.config.fr.js',
'vendor.config.es': './ClientApp/vendor.config.es.js',
'vendor.config.de': './ClientApp/vendor.config.de.js',
'vendor.config.en': './ClientApp/vendor.config.en.js',
'vendor.config.it': './ClientApp/vendor.config.it.js',
'vendor.config.pt': './ClientApp/vendor.config.pt.js'
},
resolve: {
extensions: ['.ts', '.js', '.json']
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: '/dist/'
},
module: {
rules: [{
test: /locales/,
loader: '@alienfast/i18next-loader',
query: {
basenameAsNamespace: true
}
},
{
test: /\.ts$/,
include: /ClientApp/,
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true
}
}]
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
importLoaders: 1
}
}, {
loader: 'sass-loader'
}]
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: 'url-loader?limit=25000'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.worker.js$/,
use: [{
loader: 'worker-loader',
options: {
inline: true
}
}]
},
{
test: /\.html$/,
use: [{
loader: 'html-loader'
}]
}
]
},
plugins: [
new CleanWebpackPlugin([
'wwwroot/dist/precache-manifest.*.js',
'wwwroot/dist/manifest.json',
'wwwroot/dist/icons',
'wwwroot/dist/workbox*'
]),
new ForkTsCheckerWebpackPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new ExtractTextPlugin({
filename: '[name].css'
}),
new WebpackPwaManifest({
filename: 'manifest.json',
name: 'MesHĂ´tes.com ',
short_name: 'MesHĂ´tes',
description: 'A wedding seating chart? A table plan for a birdthday or a gala? Make your seating plan online and let our robot Nono place your guests for you',
background_color: '#e71d79',
fingerprints: false,
icons: [{
src: path.resolve('ClientApp/css/images/icon.png'),
sizes: [120, 152, 167, 180, 1024],
destination: path.join('icons', 'ios'),
ios: true
},
{
src: path.resolve('ClientApp/css/images/icon.png'),
size: 1024,
destination: path.join('icons', 'ios'),
ios: 'startup'
},
{
src: path.resolve('ClientApp/css/images/icon.png'),
sizes: [36, 48, 72, 96, 144, 192, 512],
destination: path.join('icons', 'android')
}
]
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir,
'[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [])
.concat([new GenerateSW({
swDest: 'service-worker.js',
manifestTransforms: [
(manifestEntries) => ({
manifest: manifestEntries.map((entry) => {
if (entry.url.startsWith('dist/')) {
entry.url = entry.url.replace(/^dist\//i, '');
}
return entry;
})
})
],
cacheId: 'sp-admin',
importWorkboxFrom: 'local',
maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
globDirectory: './wwwroot',
globPatterns: ['**/*.{js,png,jpg,gif,ico,html,css,eot,svg,ttf,json}'],
globIgnores: [
'**/vendor-manifest.json',
'**/workbox*.js',
'**/*.hot-update.js',
'**/*.hot-update.json',
'**/precache-manifest.*.js'
],
clientsClaim: true,
skipWaiting: true
})])
}];
};When I'm adding a vendor that I know will be fully embedded in my app, I add it to the list in webpack.config.vendor.js. And I run webpack to generate vendor.js, vendor.css and copy to dist folder all required files (images, font, ...). Webpack DllPlugin generate a vendor-manifest.json file that will be used by DllReferencePlugin in the webpack.config.js build.
djeeg
jeffposnick
steven87vt
tomayac
Library Affected: workbox-webpack-plugin
@guymestef wrote at https://github.com/GoogleChrome/workbox/issues/1341#issuecomment-370746634:
@guymestef, could you share the configuration you're using for
DllPlugin—I gather it's in a separate webpack build?The docs for
DllPluginare at https://webpack.js.org/plugins/dll-plugin/, and from reading that, it looks like it spits out its ownmanifest.jsonfile that we might be able to repurpose as a source of files to precache.