Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Joe Haddad's avatar
    Polish webpack message output (#5174) · 7b1a32be
    Joe Haddad authored 
    * Only install react-scripts in CI mode

* Link locally

* Re-enable all output tests

* :lipstick: Polish webpack output

* Test sass support message

* Add more tests, but disabled

* Format missing default export error

* Format aliased import

* Why was node-sass required? Odd

* Format webpack rejection error

* Re-enable unknown package test

* Format file not found error and catch module scope plugin error

* Re-disable case sensitive paths

* Intercept and format case sensitive path errors

* Test out of scope message formatting

* Run behavior on macOS

* Run behavior on Node 8 and 10, only Node 8 for macOS

* Add some debugging

* Update matcher

* Only check stderr

* Remove old snapshot

* More debug

* Remove debug

* Add new debug

* Disable test on linux

* Add comment for future
    Unverified
    7b1a32be
webpack.config.prod.js 11.46 KiB
1 
// @remove-on-eject-begin
2 
/**
3 
 * Copyright (c) 2015-present, Facebook, Inc.
4 
 * All rights reserved.
5 
 *
6 
 * This source code is licensed under the BSD-style license found in the
7 
 * LICENSE file in the root directory of this source tree. An additional grant
8 
 * of patent rights can be found in the PATENTS file in the same directory.
9 
 */
10 
// @remove-on-eject-end
11 
'use strict';
12
13 
const autoprefixer = require('autoprefixer');
14 
const webpack = require('webpack');
15 
const HtmlWebpackPlugin = require('html-webpack-plugin');
16 
const ExtractTextPlugin = require('extract-text-webpack-plugin');
17 
const ManifestPlugin = require('webpack-manifest-plugin');
18 
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
19 
const paths = require('./paths');
20 
const getClientEnvironment = require('./env');
21
22 
// @remove-on-eject-begin
23 
// `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174
24 
const path = require('path');
25 
// @remove-on-eject-end
26
27 
// Webpack uses `publicPath` to determine where the app is being served from.
28 
// It requires a trailing slash, or the file assets will get an incorrect path.
29 
const publicPath = paths.servedPath;
30 
// Some apps do not use client-side routing with pushState.
31 
// For these, "homepage" can be set to "." to enable relative asset paths.
32 
const shouldUseRelativeAssetPaths = publicPath === './';
33 
// `publicUrl` is just like `publicPath`, but we will provide it to our app
34 
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
35 
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
36 
const publicUrl = publicPath.slice(0, -1);
37 
// Get environment variables to inject into our app.
38 
const env = getClientEnvironment(publicUrl);
39
40 
// Assert this just to be safe.
41 
// Development builds of React are slow and not intended for production.
42 
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
43 
  throw new Error('Production builds must have NODE_ENV=production.');
44 
}
45
46 
// Note: defined here because it will be used more than once.
47 
const cssFilename = 'static/css/[name].[contenthash:8].css';
48
49 
// ExtractTextPlugin expects the build output to be flat.
50 
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
51 
// However, our output is structured with css, js and media folders.
52 
// To have this structure working with relative paths, we have to use custom options.
53 
const extractTextPluginOptions = shouldUseRelativeAssetPaths
54 
  ? // Making sure that the publicPath goes back to to build folder.
55 
    { publicPath: Array(cssFilename.split('/').length).join('../') }
56 
  : {};
57
58 
// This is the production configuration.
59 
// It compiles slowly and is focused on producing a fast and minimal bundle.
60 
// The development configuration is different and lives in a separate file.
61 
module.exports = {
62 
  // Don't attempt to continue if there are any errors.
63 
  bail: true,
64 
  // We generate sourcemaps in production. This is slow but gives good results.
65 
  // You can exclude the *.map files from the build during deployment.
66 
  devtool: 'source-map',
67 
  // In production, we only want to load the polyfills and the app code.
68 
  entry: [require.resolve('./polyfills'), paths.appIndexJs],
69 
  output: {
70 
    // The build folder.
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
path: paths.appBuild, // 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', // We inferred the "public path" (such as / or /my-project) from homepage. publicPath: publicPath, }, resolve: { // This allows you to set a fallback for where Webpack should look for modules. // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. // We placed these paths second because we want `node_modules` to "win" // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules'].concat(paths.nodePaths), // These are the reasonable defaults supported by the Node ecosystem. // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 extensions: ['.js', '.json', '.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', }, }, // @remove-on-eject-begin // Resolve loaders (webpack plugins for CSS, images, transpilation) from the // directory of `react-scripts` itself rather than the project directory. resolveLoader: { modules: [ paths.ownNodeModules, // Lerna hoists everything, so we need to look in our app directory paths.appNodeModules, ], }, // @remove-on-eject-end module: { rules: [ // Disable require.ensure as it's not a standard language feature. { parser: { requireEnsure: false } }, // First, run the linter. // It's important to do this before Babel processes the JS. { test: /\.(js|jsx)$/, enforce: 'pre', use: [ { // @remove-on-eject-begin // Point ESLint to our predefined config. options: { // TODO: consider separate config for production, // e.g. to enable no-console and no-debugger only in production. configFile: path.join(__dirname, '../eslintrc'), useEslintrc: false, }, // @remove-on-eject-end loader: 'eslint-loader', }, ], include: paths.appSrc, }, // ** ADDING/UPDATING LOADERS ** // The "url" loader handles all assets unless explicitly excluded. // The `exclude` list *must* be updated with every change to loader extensions. // When adding a new loader, you must add its `test` // as a new entry in the `exclude` list in the "url" loader. // "file" loader makes sure those assets end up in the `build` folder.
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
// When you `import` an asset, you get its filename. { exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, ], loader: 'file-loader', options: { name: 'static/media/[name].[hash:8].[ext]', }, }, // "url" loader works just like "file" loader but it also embeds // assets smaller than specified size as data URLs to avoid requests. { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]', }, }, // Process JS with Babel. { test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel-loader', // @remove-on-eject-begin options: { babelrc: false, presets: [require.resolve('babel-preset-react-app')], }, // @remove-on-eject-end }, // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader normally turns CSS into JS modules injecting <style>, // but unlike in development configuration, we do something different. // `ExtractTextPlugin` first applies the "postcss" and "css" loaders // (second argument), then grabs the result CSS and puts it into a // separate file in our build process. This way we actually ship // a single CSS file in production instead of JS code injecting <style> // tags. If you use code splitting, however, any async bundles will still // use the "style" loader inside the async code so CSS from them won't be // in the main CSS file. { test: /\.css$/, loader: ExtractTextPlugin.extract( Object.assign( { fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1, }, }, { loader: 'postcss-loader', options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ autoprefixer({
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], }), ], }, }, ], }, extractTextPluginOptions ) ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // ** STOP ** Are you adding a new loader? // Remember to add the new extension(s) to the "url" loader exclusion list. ], }, 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: { screw_ie8: true, // React doesn't support IE8 warnings: false, }, mangle: { screw_ie8: true, }, output: { comments: false, screw_ie8: true, }, sourceMap: true, }), // 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
281282283284285286287288289290291292293294295
// to their corresponding output file so that tools can pick it up without // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json', }), ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. node: { fs: 'empty', net: 'empty', tls: 'empty', }, };