|
| 1 | +'use strict'; |
| 2 | + |
| 3 | +const autoprefixer = require('autoprefixer'); |
| 4 | +const path = require('path'); |
| 5 | +const webpack = require('webpack'); |
| 6 | +const HtmlWebpackPlugin = require('html-webpack-plugin'); |
| 7 | +const ExtractTextPlugin = require('extract-text-webpack-plugin'); |
| 8 | +const ManifestPlugin = require('webpack-manifest-plugin'); |
| 9 | +const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); |
| 10 | +const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); |
| 11 | +const eslintFormatter = require('react-dev-utils/eslintFormatter'); |
| 12 | +const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); |
| 13 | +const paths = require('./paths'); |
| 14 | +const getClientEnvironment = require('./env'); |
| 15 | + |
| 16 | +// Webpack uses `publicPath` to determine where the app is being served from. |
| 17 | +// It requires a trailing slash, or the file assets will get an incorrect path. |
| 18 | +const publicPath = paths.servedPath; |
| 19 | +// Some apps do not use client-side routing with pushState. |
| 20 | +// For these, "homepage" can be set to "." to enable relative asset paths. |
| 21 | +const shouldUseRelativeAssetPaths = publicPath === './'; |
| 22 | +// Source maps are resource heavy and can cause out of memory issue for large source files. |
| 23 | +const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; |
| 24 | +// `publicUrl` is just like `publicPath`, but we will provide it to our app |
| 25 | +// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. |
| 26 | +// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. |
| 27 | +const publicUrl = publicPath.slice(0, -1); |
| 28 | +// Get environment variables to inject into our app. |
| 29 | +const env = getClientEnvironment(publicUrl); |
| 30 | + |
| 31 | +// Assert this just to be safe. |
| 32 | +// Development builds of React are slow and not intended for production. |
| 33 | +if (env.stringified['process.env'].NODE_ENV !== '"production"') { |
| 34 | + throw new Error('Production builds must have NODE_ENV=production.'); |
| 35 | +} |
| 36 | + |
| 37 | +// Note: defined here because it will be used more than once. |
| 38 | +const cssFilename = 'static/css/[name].[contenthash:8].css'; |
| 39 | + |
| 40 | +// ExtractTextPlugin expects the build output to be flat. |
| 41 | +// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27) |
| 42 | +// However, our output is structured with css, js and media folders. |
| 43 | +// To have this structure working with relative paths, we have to use custom options. |
| 44 | +const extractTextPluginOptions = shouldUseRelativeAssetPaths |
| 45 | + ? // Making sure that the publicPath goes back to to build folder. |
| 46 | + { publicPath: Array(cssFilename.split('/').length).join('../') } |
| 47 | + : {}; |
| 48 | + |
| 49 | +// This is the production configuration. |
| 50 | +// It compiles slowly and is focused on producing a fast and minimal bundle. |
| 51 | +// The development configuration is different and lives in a separate file. |
| 52 | +module.exports = { |
| 53 | + // Don't attempt to continue if there are any errors. |
| 54 | + bail: true, |
| 55 | + // We generate sourcemaps in production. This is slow but gives good results. |
| 56 | + // You can exclude the *.map files from the build during deployment. |
| 57 | + devtool: shouldUseSourceMap ? 'source-map' : false, |
| 58 | + // In production, we only want to load the polyfills and the app code. |
| 59 | + // entry: [require.resolve('./polyfills'), paths.appLibJs, paths.appFormJs, paths.appInputJs, paths.appSelectJs, paths.appTextareaJs, paths.appButtonJs], |
| 60 | + entry: { polyfills: require.resolve('./polyfills'), main: paths.appLibJs, form: paths.appFormJs, input: paths.appInputJs, select: paths.appSelectJs, textarea: paths.appTextareaJs, button: paths.appButtonJs}, |
| 61 | + output: { |
| 62 | + library: "[name]", |
| 63 | + libraryTarget: "umd", |
| 64 | + // The build folder. |
| 65 | + path: paths.appBuild, |
| 66 | + // Generated JS file names (with nested folders). |
| 67 | + // There will be one main bundle, and one file per asynchronous chunk. |
| 68 | + // We don't currently advertise code splitting but Webpack supports it. |
| 69 | + filename: '[name].js', |
| 70 | + // We inferred the "public path" (such as / or /my-project) from homepage. |
| 71 | + publicPath: publicPath, |
| 72 | + // Point sourcemap entries to original disk location (format as URL on Windows) |
| 73 | + devtoolModuleFilenameTemplate: info => |
| 74 | + path |
| 75 | + .relative(paths.appSrc, info.absoluteResourcePath) |
| 76 | + .replace(/\\/g, '/'), |
| 77 | + }, |
| 78 | + externals: { |
| 79 | + "react": { |
| 80 | + commonjs: "react", |
| 81 | + commonjs2: "react", |
| 82 | + amd: "react", |
| 83 | + root: "React" |
| 84 | + }, |
| 85 | + "lodash.omit": { |
| 86 | + commonjs: "lodash.omit", |
| 87 | + commonjs2: "lodash.omit", |
| 88 | + amd: "lodash.omit", |
| 89 | + root: "_.omit" |
| 90 | + }, |
| 91 | + "prop-types": { |
| 92 | + commonjs: "prop-types", |
| 93 | + commonjs2: "prop-types", |
| 94 | + amd: "prop-types", |
| 95 | + root: "PropTypes" |
| 96 | + }, |
| 97 | + "uuid/v4": { |
| 98 | + commonjs: "uuid/v4", |
| 99 | + commonjs2: "uuid/v4", |
| 100 | + amd: "uuid/v4", |
| 101 | + root: "uuid" |
| 102 | + } |
| 103 | + }, |
| 104 | + resolve: { |
| 105 | + // This allows you to set a fallback for where Webpack should look for modules. |
| 106 | + // We placed these paths second because we want `node_modules` to "win" |
| 107 | + // if there are any conflicts. This matches Node resolution mechanism. |
| 108 | + // https://github.com/facebookincubator/create-react-app/issues/253 |
| 109 | + modules: ['node_modules', paths.appNodeModules].concat( |
| 110 | + // It is guaranteed to exist because we tweak it in `env.js` |
| 111 | + process.env.NODE_PATH.split(path.delimiter).filter(Boolean) |
| 112 | + ), |
| 113 | + // These are the reasonable defaults supported by the Node ecosystem. |
| 114 | + // We also include JSX as a common component filename extension to support |
| 115 | + // some tools, although we do not recommend using it, see: |
| 116 | + // https://github.com/facebookincubator/create-react-app/issues/290 |
| 117 | + // `web` extension prefixes have been added for better support |
| 118 | + // for React Native Web. |
| 119 | + extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'], |
| 120 | + alias: { |
| 121 | + |
| 122 | + // Support React Native Web |
| 123 | + // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ |
| 124 | + 'react-native': 'react-native-web', |
| 125 | + }, |
| 126 | + plugins: [ |
| 127 | + // Prevents users from importing files from outside of src/ (or node_modules/). |
| 128 | + // This often causes confusion because we only process files within src/ with babel. |
| 129 | + // To fix this, we prevent you from importing files out of src/ -- if you'd like to, |
| 130 | + // please link the files into your node_modules/ and let module-resolution kick in. |
| 131 | + // Make sure your source files are compiled, as they will not be processed in any way. |
| 132 | + new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), |
| 133 | + ], |
| 134 | + }, |
| 135 | + module: { |
| 136 | + strictExportPresence: true, |
| 137 | + rules: [ |
| 138 | + // TODO: Disable require.ensure as it's not a standard language feature. |
| 139 | + // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176. |
| 140 | + // { parser: { requireEnsure: false } }, |
| 141 | + |
| 142 | + // First, run the linter. |
| 143 | + // It's important to do this before Babel processes the JS. |
| 144 | + { |
| 145 | + test: /\.(js|jsx)$/, |
| 146 | + enforce: 'pre', |
| 147 | + use: [ |
| 148 | + { |
| 149 | + options: { |
| 150 | + formatter: eslintFormatter, |
| 151 | + eslintPath: require.resolve('eslint'), |
| 152 | + |
| 153 | + }, |
| 154 | + loader: require.resolve('eslint-loader'), |
| 155 | + }, |
| 156 | + ], |
| 157 | + include: paths.appSrc, |
| 158 | + }, |
| 159 | + { |
| 160 | + // "oneOf" will traverse all following loaders until one will |
| 161 | + // match the requirements. When no loader matches it will fall |
| 162 | + // back to the "file" loader at the end of the loader list. |
| 163 | + oneOf: [ |
| 164 | + // "url" loader works just like "file" loader but it also embeds |
| 165 | + // assets smaller than specified size as data URLs to avoid requests. |
| 166 | + { |
| 167 | + test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], |
| 168 | + loader: require.resolve('url-loader'), |
| 169 | + options: { |
| 170 | + limit: 10000, |
| 171 | + name: 'static/media/[name].[hash:8].[ext]', |
| 172 | + }, |
| 173 | + }, |
| 174 | + // Process JS with Babel. |
| 175 | + { |
| 176 | + test: /\.(js|jsx)$/, |
| 177 | + include: paths.appSrc, |
| 178 | + loader: require.resolve('babel-loader'), |
| 179 | + options: { |
| 180 | + |
| 181 | + compact: true, |
| 182 | + }, |
| 183 | + }, |
| 184 | + // The notation here is somewhat confusing. |
| 185 | + // "postcss" loader applies autoprefixer to our CSS. |
| 186 | + // "css" loader resolves paths in CSS and adds assets as dependencies. |
| 187 | + // "style" loader normally turns CSS into JS modules injecting <style>, |
| 188 | + // but unlike in development configuration, we do something different. |
| 189 | + // `ExtractTextPlugin` first applies the "postcss" and "css" loaders |
| 190 | + // (second argument), then grabs the result CSS and puts it into a |
| 191 | + // separate file in our build process. This way we actually ship |
| 192 | + // a single CSS file in production instead of JS code injecting <style> |
| 193 | + // tags. If you use code splitting, however, any async bundles will still |
| 194 | + // use the "style" loader inside the async code so CSS from them won't be |
| 195 | + // in the main CSS file. |
| 196 | + { |
| 197 | + test: /\.css$/, |
| 198 | + loader: ExtractTextPlugin.extract( |
| 199 | + Object.assign( |
| 200 | + { |
| 201 | + fallback: require.resolve('style-loader'), |
| 202 | + use: [ |
| 203 | + { |
| 204 | + loader: require.resolve('css-loader'), |
| 205 | + options: { |
| 206 | + importLoaders: 1, |
| 207 | + minimize: true, |
| 208 | + sourceMap: shouldUseSourceMap, |
| 209 | + }, |
| 210 | + }, |
| 211 | + { |
| 212 | + loader: require.resolve('postcss-loader'), |
| 213 | + options: { |
| 214 | + // Necessary for external CSS imports to work |
| 215 | + // https://github.com/facebookincubator/create-react-app/issues/2677 |
| 216 | + ident: 'postcss', |
| 217 | + plugins: () => [ |
| 218 | + require('postcss-flexbugs-fixes'), |
| 219 | + autoprefixer({ |
| 220 | + browsers: [ |
| 221 | + '>1%', |
| 222 | + 'last 4 versions', |
| 223 | + 'Firefox ESR', |
| 224 | + 'not ie < 9', // React doesn't support IE8 anyway |
| 225 | + ], |
| 226 | + flexbox: 'no-2009', |
| 227 | + }), |
| 228 | + ], |
| 229 | + }, |
| 230 | + }, |
| 231 | + ], |
| 232 | + }, |
| 233 | + extractTextPluginOptions |
| 234 | + ) |
| 235 | + ), |
| 236 | + // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. |
| 237 | + }, |
| 238 | + // "file" loader makes sure assets end up in the `build` folder. |
| 239 | + // When you `import` an asset, you get its filename. |
| 240 | + // This loader doesn't use a "test" so it will catch all modules |
| 241 | + // that fall through the other loaders. |
| 242 | + { |
| 243 | + loader: require.resolve('file-loader'), |
| 244 | + // Exclude `js` files to keep "css" loader working as it injects |
| 245 | + // it's runtime that would otherwise processed through "file" loader. |
| 246 | + // Also exclude `html` and `json` extensions so they get processed |
| 247 | + // by webpacks internal loaders. |
| 248 | + exclude: [/\.js$/, /\.html$/, /\.json$/], |
| 249 | + options: { |
| 250 | + name: 'static/media/[name].[hash:8].[ext]', |
| 251 | + }, |
| 252 | + }, |
| 253 | + // ** STOP ** Are you adding a new loader? |
| 254 | + // Make sure to add the new loader(s) before the "file" loader. |
| 255 | + ], |
| 256 | + }, |
| 257 | + ], |
| 258 | + }, |
| 259 | + plugins: [ |
| 260 | + // Makes some environment variables available in index.html. |
| 261 | + // The public URL is available as %PUBLIC_URL% in index.html, e.g.: |
| 262 | + // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> |
| 263 | + // In production, it will be an empty string unless you specify "homepage" |
| 264 | + // in `package.json`, in which case it will be the pathname of that URL. |
| 265 | + new InterpolateHtmlPlugin(env.raw), |
| 266 | + // Generates an `index.html` file with the <script> injected. |
| 267 | + new HtmlWebpackPlugin({ |
| 268 | + inject: true, |
| 269 | + template: paths.appHtml, |
| 270 | + minify: { |
| 271 | + removeComments: true, |
| 272 | + collapseWhitespace: true, |
| 273 | + removeRedundantAttributes: true, |
| 274 | + useShortDoctype: true, |
| 275 | + removeEmptyAttributes: true, |
| 276 | + removeStyleLinkTypeAttributes: true, |
| 277 | + keepClosingSlash: true, |
| 278 | + minifyJS: true, |
| 279 | + minifyCSS: true, |
| 280 | + minifyURLs: true, |
| 281 | + }, |
| 282 | + }), |
| 283 | + // Makes some environment variables available to the JS code, for example: |
| 284 | + // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`. |
| 285 | + // It is absolutely essential that NODE_ENV was set to production here. |
| 286 | + // Otherwise React will be compiled in the very slow development mode. |
| 287 | + new webpack.DefinePlugin(env.stringified), |
| 288 | + // Minify the code. |
| 289 | + new webpack.optimize.UglifyJsPlugin({ |
| 290 | + compress: { |
| 291 | + warnings: false, |
| 292 | + // Disabled because of an issue with Uglify breaking seemingly valid code: |
| 293 | + // https://github.com/facebookincubator/create-react-app/issues/2376 |
| 294 | + // Pending further investigation: |
| 295 | + // https://github.com/mishoo/UglifyJS2/issues/2011 |
| 296 | + comparisons: false, |
| 297 | + }, |
| 298 | + output: { |
| 299 | + comments: false, |
| 300 | + // Turned on because emoji and regex is not minified properly using default |
| 301 | + // https://github.com/facebookincubator/create-react-app/issues/2488 |
| 302 | + ascii_only: true, |
| 303 | + }, |
| 304 | + sourceMap: shouldUseSourceMap, |
| 305 | + }), |
| 306 | + // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. |
| 307 | + new ExtractTextPlugin({ |
| 308 | + filename: cssFilename, |
| 309 | + }), |
| 310 | + // Generate a manifest file which contains a mapping of all asset filenames |
| 311 | + // to their corresponding output file so that tools can pick it up without |
| 312 | + // having to parse `index.html`. |
| 313 | + new ManifestPlugin({ |
| 314 | + fileName: 'asset-manifest.json', |
| 315 | + }), |
| 316 | + // Generate a service worker script that will precache, and keep up to date, |
| 317 | + // the HTML & assets that are part of the Webpack build. |
| 318 | + new SWPrecacheWebpackPlugin({ |
| 319 | + // By default, a cache-busting query parameter is appended to requests |
| 320 | + // used to populate the caches, to ensure the responses are fresh. |
| 321 | + // If a URL is already hashed by Webpack, then there is no concern |
| 322 | + // about it being stale, and the cache-busting can be skipped. |
| 323 | + dontCacheBustUrlsMatching: /\.\w{8}\./, |
| 324 | + filename: 'service-worker.js', |
| 325 | + logger(message) { |
| 326 | + if (message.indexOf('Total precache size is') === 0) { |
| 327 | + // This message occurs for every build and is a bit too noisy. |
| 328 | + return; |
| 329 | + } |
| 330 | + if (message.indexOf('Skipping static resource') === 0) { |
| 331 | + // This message obscures real errors so we ignore it. |
| 332 | + // https://github.com/facebookincubator/create-react-app/issues/2612 |
| 333 | + return; |
| 334 | + } |
| 335 | + console.log(message); |
| 336 | + }, |
| 337 | + minify: true, |
| 338 | + // For unknown URLs, fallback to the index page |
| 339 | + navigateFallback: publicUrl + '/index.html', |
| 340 | + // Ignores URLs starting from /__ (useful for Firebase): |
| 341 | + // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219 |
| 342 | + navigateFallbackWhitelist: [/^(?!\/__).*/], |
| 343 | + // Don't precache sourcemaps (they're large) and build asset manifest: |
| 344 | + staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], |
| 345 | + }), |
| 346 | + // Moment.js is an extremely popular library that bundles large locale files |
| 347 | + // by default due to how Webpack interprets its code. This is a practical |
| 348 | + // solution that requires the user to opt into importing specific locales. |
| 349 | + // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack |
| 350 | + // You can remove this if you don't use Moment.js: |
| 351 | + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), |
| 352 | + ], |
| 353 | + // Some libraries import Node modules but don't use them in the browser. |
| 354 | + // Tell Webpack to provide empty mocks for them so importing them works. |
| 355 | + node: { |
| 356 | + dgram: 'empty', |
| 357 | + fs: 'empty', |
| 358 | + net: 'empty', |
| 359 | + tls: 'empty', |
| 360 | + child_process: 'empty', |
| 361 | + }, |
| 362 | +}; |
0 commit comments