Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
webpack.config.prod.js 11.97 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 path = require('path');
15 
const webpack = require('webpack');
16 
const HtmlWebpackPlugin = require('html-webpack-plugin');
17 
const ExtractTextPlugin = require('extract-text-webpack-plugin');
18 
const ManifestPlugin = require('webpack-manifest-plugin');
19 
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
20 
const eslintFormatter = require('react-dev-utils/eslintFormatter');
21 
const paths = require('./paths');
22 
const getClientEnvironment = require('./env');
23
24 
// Webpack uses `publicPath` to determine where the app is being served from.
25 
// It requires a trailing slash, or the file assets will get an incorrect path.
26 
const publicPath = paths.servedPath;
27 
// Some apps do not use client-side routing with pushState.
28 
// For these, "homepage" can be set to "." to enable relative asset paths.
29 
const shouldUseRelativeAssetPaths = publicPath === './';
30 
// `publicUrl` is just like `publicPath`, but we will provide it to our app
31 
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
32 
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
33 
const publicUrl = publicPath.slice(0, -1);
34 
// Get environment variables to inject into our app.
35 
const env = getClientEnvironment(publicUrl);
36
37 
// Assert this just to be safe.
38 
// Development builds of React are slow and not intended for production.
39 
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
40 
  throw new Error('Production builds must have NODE_ENV=production.');
41 
}
42
43 
// Note: defined here because it will be used more than once.
44 
const cssFilename = 'static/css/[name].[contenthash:8].css';
45
46 
// ExtractTextPlugin expects the build output to be flat.
47 
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
48 
// However, our output is structured with css, js and media folders.
49 
// To have this structure working with relative paths, we have to use custom options.
50 
const extractTextPluginOptions = shouldUseRelativeAssetPaths
51 
  ? // Making sure that the publicPath goes back to to build folder.
52 
    { publicPath: Array(cssFilename.split('/').length).join('../') }
53 
  : {};
54
55 
// This is the production configuration.
56 
// It compiles slowly and is focused on producing a fast and minimal bundle.
57 
// The development configuration is different and lives in a separate file.
58 
module.exports = {
59 
  // Don't attempt to continue if there are any errors.
60 
  bail: true,
61 
  // We generate sourcemaps in production. This is slow but gives good results.
62 
  // You can exclude the *.map files from the build during deployment.
63 
  devtool: 'source-map',
64 
  // In production, we only want to load the polyfills and the app code.
65 
  entry: [require.resolve('./polyfills'), paths.appIndexJs],
66 
  output: {
67 
    // The build folder.
68 
    path: paths.appBuild,
69 
    // Generated JS file names (with nested folders).
70 
    // There will be one main bundle, and one file per asynchronous chunk.
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// 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, // Point sourcemap entries to original disk location devtoolModuleFilenameTemplate: info => path.relative(paths.appSrc, info.absoluteResourcePath), }, 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', paths.appNodeModules].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: { // @remove-on-eject-begin // Resolve Babel runtime relative to react-scripts. // It usually still works on npm 3 without this but it would be // unfortunate to rely on, as react-scripts could be symlinked, // and thus babel-runtime might not be resolvable from the source. 'babel-runtime': path.dirname( require.resolve('babel-runtime/package.json') ), // @remove-on-eject-end // 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', }, }, module: { strictExportPresence: true, rules: [ // TODO: Disable require.ensure as it's not a standard language feature. // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176. // { parser: { requireEnsure: false } }, // First, run the linter. // It's important to do this before Babel processes the JS. { test: /\.(js|jsx)$/, enforce: 'pre', use: [ { options: { formatter: eslintFormatter, // @remove-on-eject-begin // TODO: consider separate config for production, // e.g. to enable no-console and no-debugger only in production. baseConfig: { extends: [require.resolve('eslint-config-react-app')], }, ignore: false, useEslintrc: false, // @remove-on-eject-end }, loader: require.resolve('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.
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
// 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. // When you `import` an asset, you get its filename. { exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, ], loader: require.resolve('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: require.resolve('url-loader'), options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]', }, }, // Process JS with Babel. { test: /\.(js|jsx)$/, include: paths.appSrc, loader: require.resolve('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: require.resolve('style-loader'), use: [ { loader: require.resolve('css-loader'), options: { importLoaders: 1, minimize: true, sourceMap: true, }, },
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
{ loader: require.resolve('postcss-loader'), options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, ], }, 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: { warnings: false, }, output: { comments: false, }, sourceMap: true, }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. new ExtractTextPlugin({
281282283284285286287288289290291292293294295296297298
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', }), ], // 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', }, };