Permalink
Browse files

prod output newtab and popup

  • Loading branch information...
lsenta committed Dec 23, 2017
1 parent f96a4fc commit 502cd7ca6ca4f6daa85ba7dfd3ebc909925571b6
Showing with 38 additions and 52 deletions.
  1. +4 −0 config/paths.js
  2. +34 −52 config/webpack.config.prod.js
View
@@ -44,7 +44,11 @@ module.exports = {
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
newtabHtml: resolveApp('public/newtab.html'),
popupHtml: resolveApp('public/popup.html'),
appIndexJs: resolveApp('src/index.js'),
newtabJs: resolveApp('src/newtab.js'),
popupJs: resolveApp('src/popup.js'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
yarnLockFile: resolveApp('yarn.lock'),
@@ -43,9 +43,30 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
// To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split('/').length).join('../') }
{ publicPath: Array(cssFilename.split('/').length).join('../') }
: {};
function htmlPlugin({ template, chunks, filename }) {
return new HtmlWebpackPlugin({
inject: true,
template,
chunks,
filename,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
})
}
// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file.
@@ -56,7 +77,11 @@ module.exports = {
// You can exclude the *.map files from the build during deployment.
devtool: shouldUseSourceMap ? 'source-map' : false,
// In production, we only want to load the polyfills and the app code.
entry: [require.resolve('./polyfills'), paths.appIndexJs],
entry: {
index: [require.resolve('./polyfills'), paths.appIndexJs],
newtab: [require.resolve('./polyfills'), paths.newtabJs],
popup: [require.resolve('./polyfills'), paths.popupJs]
},
output: {
// The build folder.
path: paths.appBuild,
@@ -90,7 +115,7 @@ module.exports = {
// for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
@@ -121,7 +146,7 @@ module.exports = {
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
@@ -149,7 +174,7 @@ module.exports = {
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
compact: true,
},
},
@@ -241,22 +266,9 @@ module.exports = {
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
htmlPlugin({ template: paths.appHtml, chunks: ['index'], filename: 'index.html' }),
htmlPlugin({ template: paths.newtabHtml, chunks: ['newtab'], filename: 'newtab.html' }),
htmlPlugin({ template: paths.popupHtml, chunks: ['popup'], filename: 'popup.html' }),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
@@ -274,7 +286,7 @@ module.exports = {
},
mangle: {
safari10: true,
},
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
@@ -293,36 +305,6 @@ module.exports = {
new ManifestPlugin({
fileName: 'asset-manifest.json',
}),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
new SWPrecacheWebpackPlugin({
// By default, a cache-busting query parameter is appended to requests
// used to populate the caches, to ensure the responses are fresh.
// If a URL is already hashed by Webpack, then there is no concern
// about it being stale, and the cache-busting can be skipped.
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
logger(message) {
if (message.indexOf('Total precache size is') === 0) {
// This message occurs for every build and is a bit too noisy.
return;
}
if (message.indexOf('Skipping static resource') === 0) {
// This message obscures real errors so we ignore it.
// https://github.com/facebookincubator/create-react-app/issues/2612
return;
}
console.log(message);
},
minify: true,
// For unknown URLs, fallback to the index page
navigateFallback: publicUrl + '/index.html',
// Ignores URLs starting from /__ (useful for Firebase):
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
navigateFallbackWhitelist: [/^(?!\/__).*/],
// Don't precache sourcemaps (they're large) and build asset manifest:
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.

0 comments on commit 502cd7c

Please sign in to comment.