Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Kanitkorn Sujautra's avatar
    Create asset filenames mapping on the build output (#891) · 88c15d09
    Kanitkorn Sujautra authored 
    * Create asset filenames mapping on the build output

I use danethurber/webpack-manifest-plugin on Webpack production
configuration to create a file named `asset-manifest.json` which contain a
mapping of all asset filenames to their corresponding output file.

`asset-manifest.json` will be located at the root of output folder.

This'll resolve #600

* Add an explanation for ManifestPlugin

* Make webpack-manifest-plugin's version exact
    88c15d09
webpack.config.prod.js 10.59 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 path = require('path');
13 
var autoprefixer = require('autoprefixer');
14 
var webpack = require('webpack');
15 
var HtmlWebpackPlugin = require('html-webpack-plugin');
16 
var ExtractTextPlugin = require('extract-text-webpack-plugin');
17 
var ManifestPlugin = require('webpack-manifest-plugin');
18 
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
19 
var url = require('url');
20 
var paths = require('./paths');
21 
var getClientEnvironment = require('./env');
22
23 
function ensureSlash(path, needsSlash) {
24 
  var hasSlash = path.endsWith('/');
25 
  if (hasSlash && !needsSlash) {
26 
    return path.substr(path, path.length - 1);
27 
  } else if (!hasSlash && needsSlash) {
28 
    return path + '/';
29 
  } else {
30 
    return path;
31 
  }
32 
}
33
34 
// We use "homepage" field to infer "public path" at which the app is served.
35 
// Webpack needs to know it to put the right <script> hrefs into HTML even in
36 
// single-page apps that may serve index.html for nested URLs like /todos/42.
37 
// We can't use a relative path in HTML because we don't want to load something
38 
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
39 
var homepagePath = require(paths.appPackageJson).homepage;
40 
var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
41 
// Webpack uses `publicPath` to determine where the app is being served from.
42 
// It requires a trailing slash, or the file assets will get an incorrect path.
43 
var publicPath = ensureSlash(homepagePathname, true);
44 
// `publicUrl` is just like `publicPath`, but we will provide it to our app
45 
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
46 
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
47 
var publicUrl = ensureSlash(homepagePathname, false);
48 
// Get environment variables to inject into our app.
49 
var env = getClientEnvironment(publicUrl);
50
51 
// Assert this just to be safe.
52 
// Development builds of React are slow and not intended for production.
53 
if (env['process.env'].NODE_ENV !== '"production"') {
54 
  throw new Error('Production builds must have NODE_ENV=production.');
55 
}
56
57 
// This is the production configuration.
58 
// It compiles slowly and is focused on producing a fast and minimal bundle.
59 
// The development configuration is different and lives in a separate file.
60 
module.exports = {
61 
  // Don't attempt to continue if there are any errors.
62 
  bail: true,
63 
  // We generate sourcemaps in production. This is slow but gives good results.
64 
  // You can exclude the *.map files from the build during deployment.
65 
  devtool: 'source-map',
66 
  // In production, we only want to load the polyfills and the app code.
67 
  entry: [
68 
    require.resolve('./polyfills'),
69 
    paths.appIndexJs
70 
  ],
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: [ // 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
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
// use the "style" loader inside the async code so CSS from them won't be // in the main CSS file. { test: /\.css$/, // "?-autoprefixer" disables autoprefixer in css-loader itself: // https://github.com/webpack/css-loader/issues/281 // We already have it thanks to postcss. We only pass this flag in // production because "css" loader only enables autoprefixer-powered // removal of unnecessary prefixes when Uglify plugin is enabled. // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets // including CSS. This is confusing and will be removed in Webpack 2: // https://github.com/webpack/webpack/issues/283 loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss') // 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 makes sure those assets end up in the `build` folder. // When you `import` an asset, you get its filename. { test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, loader: 'file', query: { 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: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } } ] }, // @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 ] }), ]; }, plugins: [ // Makes the public URL 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({
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
PUBLIC_URL: publicUrl }), // 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), // 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('static/css/[name].[contenthash:8].css'), // 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' } };