Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Thibault Derousseaux's avatar
    Support relative asset paths for special case (#1489) · 8e127aaa
    Thibault Derousseaux authored 
    * Fix paths in CSS files when homepage is set to "./"

In the production build, ExtractTextPlugin is used to generate a separate CSS file instead of injecting style through JavaScript. This plugin does not work well by default with nested output structure. To fix it, we give it a relative publicPath pointing to the build folder.

* Add section in README to explain how to make builds deployable anywhere

* Apply review requested change

* Apply review changes 2
    8e127aaa
webpack.config.prod.js 10.65 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
12 
var autoprefixer = require('autoprefixer');
13 
var webpack = require('webpack');
14 
var HtmlWebpackPlugin = require('html-webpack-plugin');
15 
var ExtractTextPlugin = require('extract-text-webpack-plugin');
16 
var ManifestPlugin = require('webpack-manifest-plugin');
17 
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
18 
var url = require('url');
19 
var paths = require('./paths');
20 
var 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 
var 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 
var 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 
var 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 
var publicUrl = publicPath.slice(0, -1);
37 
// Get environment variables to inject into our app.
38 
var 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 
  : undefined;
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: [
69 
    require.resolve('./polyfills'),
70 
    paths.appIndexJs
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
], output: { // The build folder. 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 use `fallback` instead of `root` because we want `node_modules` to "win" // if there any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 fallback: 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: { root: paths.ownNodeModules, moduleTemplates: ['*-loader'] }, // @remove-on-eject-end module: { // First, run the linter. // It's important to do this before Babel processes the JS. preLoaders: [ { test: /\.(js|jsx)$/, loader: 'eslint', include: paths.appSrc } ], loaders: [ // ** 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. // "url" loader embeds assets smaller than specified size as data URLs to avoid requests. // Otherwise, it acts like the "file" loader. { exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.svg$/ ], loader: 'url', query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
}, // Process JS with Babel. { test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', // @remove-on-eject-begin query: { 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( 'style', 'css?importLoaders=1!postcss', extractTextPluginOptions ) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. { test: /\.json$/, loader: 'json' }, // "file" loader for svg { test: /\.svg$/, loader: 'file', query: { name: 'static/media/[name].[hash:8].[ext]' } } // ** STOP ** Are you adding a new loader? // Remember to add the new extension(s) to the "url" loader exclusion list. ] }, // @remove-on-eject-begin // Point ESLint to our predefined config. eslint: { // 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 // We use PostCSS for autoprefixing only. postcss: function() { return [ autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
] }), ]; }, 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), // This helps ensure the builds are consistent if source hasn't changed: new webpack.optimize.OccurrenceOrderPlugin(), // Try to dedupe duplicated modules, if any: new webpack.optimize.DedupePlugin(), // 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 } }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. new ExtractTextPlugin(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' } };