WIP library build step

Author: albertstill

packages/react-scripts/config/webpack.config.library.js

@@ -10,11 +10,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
@@ -93,8 +89,8 @@ module.exports = {
  // Generated JS file names (with nested folders).
  // There will be one main bundle, and one file per asynchronous chunk.
  // We don't currently advertise code splitting but Webpack supports it.
- filename: 'static/js/[name].[chunkhash:8].js',
- chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
+ filename: 'index.js',
+ libraryTarget: 'commonjs',
  // We inferred the "public path" (such as / or /my-project) from homepage.
  publicPath: publicPath,
  // Point sourcemap entries to original disk location (format as URL on Windows)
@@ -287,95 +283,15 @@ module.exports = {
  ],
  },
  plugins: [
- // Makes some environment variables available in index.html.
- // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
- // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
- // In production, it will be an empty string unless you specify "homepage"
- // 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,
- },
- }),
  // 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.
  // Otherwise React will be compiled in the very slow development mode.
  new webpack.DefinePlugin(env.stringified),
- // Minify the code.
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false,
- // Disabled because of an issue with Uglify breaking seemingly valid code:
- // https://github.com/facebookincubator/create-react-app/issues/2376
- // Pending further investigation:
- // https://github.com/mishoo/UglifyJS2/issues/2011
- comparisons: false,
- },
- mangle: {
- safari10: true,
- },
- output: {
- comments: false,
- // Turned on because emoji and regex is not minified properly using default
- // https://github.com/facebookincubator/create-react-app/issues/2488
- ascii_only: true,
- },
- sourceMap: shouldUseSourceMap,
- }),
  // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
  new ExtractTextPlugin({
  filename: cssFilename,
  }),
- // Generate a manifest file which contains a mapping of all asset filenames
- // to their corresponding output file so that tools can pick it up without
- // having to parse `index.html`.
- 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.

packages/react-scripts/scripts/build-library.js

@@ -55,8 +55,6 @@ measureFileSizesBeforeBuild(paths.appBuild)
  // Remove all content but keep the directory so that
  // if you're in it, you don't end up in Trash
  fs.emptyDirSync(paths.appBuild);
- // Merge with the public folder
- copyPublicFolder();
  // Start the webpack build
  return build(previousFileSizes);
  })
@@ -149,10 +147,3 @@ function build(previousFileSizes) {
  });
  });
 }
-
-function copyPublicFolder() {
- fs.copySync(paths.appPublic, paths.appBuild, {
- dereference: true,
- filter: file => file !== paths.appHtml,
- });
-}