|
| 1 | +var path = require('path'); |
| 2 | +var autoprefixer = require('autoprefixer'); |
| 3 | +var webpack = require('webpack'); |
| 4 | +var findCacheDir = require('find-cache-dir'); |
| 5 | +var HtmlWebpackPlugin = require('html-webpack-plugin'); |
| 6 | +var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); |
| 7 | +var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); |
| 8 | +var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); |
| 9 | +var getClientEnvironment = require('./env'); |
| 10 | +var paths = require('./paths'); |
| 11 | + |
| 12 | +// Webpack uses `publicPath` to determine where the app is being served from. |
| 13 | +// In development, we always serve from the root. This makes config easier. |
| 14 | +var publicPath = '/'; |
| 15 | +// `publicUrl` is just like `publicPath`, but we will provide it to our app |
| 16 | +// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. |
| 17 | +// Omit trailing shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. |
| 18 | +var publicUrl = ''; |
| 19 | +// Get enrivonment variables to inject into our app. |
| 20 | +var env = getClientEnvironment(publicUrl); |
| 21 | + |
| 22 | +// This is the development configuration. |
| 23 | +// It is focused on developer experience and fast rebuilds. |
| 24 | +// The production configuration is different and lives in a separate file. |
| 25 | +module.exports = { |
| 26 | + // This makes the bundle appear split into separate modules in the devtools. |
| 27 | + // We don't use source maps here because they can be confusing: |
| 28 | + // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875 |
| 29 | + // You may want 'cheap-module-source-map' instead if you prefer source maps. |
| 30 | + devtool: 'eval', |
| 31 | + // These are the "entry points" to our application. |
| 32 | + // This means they will be the "root" imports that are included in JS bundle. |
| 33 | + // The first two entry points enable "hot" CSS and auto-refreshes for JS. |
| 34 | + entry: [ |
| 35 | + // Include an alternative client for WebpackDevServer. A client's job is to |
| 36 | + // connect to WebpackDevServer by a socket and get notified about changes. |
| 37 | + // When you save a file, the client will either apply hot updates (in case |
| 38 | + // of CSS changes), or refresh the page (in case of JS changes). When you |
| 39 | + // make a syntax error, this client will display a syntax error overlay. |
| 40 | + // Note: instead of the default WebpackDevServer client, we use a custom one |
| 41 | + // to bring better experience for Create React App users. You can replace |
| 42 | + // the line below with these two lines if you prefer the stock client: |
| 43 | + // require.resolve('webpack-dev-server/client') + '?/', |
| 44 | + // require.resolve('webpack/hot/dev-server'), |
| 45 | + require.resolve('react-dev-utils/webpackHotDevClient'), |
| 46 | + // We ship a few polyfills by default: |
| 47 | + require.resolve('./polyfills'), |
| 48 | + // Finally, this is your app's code: |
| 49 | + paths.appIndexJs |
| 50 | + // We include the app code last so that if there is a runtime error during |
| 51 | + // initialization, it doesn't blow up the WebpackDevServer client, and |
| 52 | + // changing JS code would still trigger a refresh. |
| 53 | + ], |
| 54 | + output: { |
| 55 | + // Next line is not used in dev but WebpackDevServer crashes without it: |
| 56 | + path: paths.appBuild, |
| 57 | + // Add /* filename */ comments to generated require()s in the output. |
| 58 | + pathinfo: true, |
| 59 | + // This does not produce a real file. It's just the virtual path that is |
| 60 | + // served by WebpackDevServer in development. This is the JS bundle |
| 61 | + // containing code from all our entry points, and the Webpack runtime. |
| 62 | + filename: 'static/js/bundle.js', |
| 63 | + // This is the URL that app is served from. We use "/" in development. |
| 64 | + publicPath: publicPath |
| 65 | + }, |
| 66 | + resolve: { |
| 67 | + // This allows you to set a fallback for where Webpack should look for modules. |
| 68 | + // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. |
| 69 | + // We use `fallback` instead of `root` because we want `node_modules` to "win" |
| 70 | + // if there any conflicts. This matches Node resolution mechanism. |
| 71 | + // https://github.com/facebookincubator/create-react-app/issues/253 |
| 72 | + fallback: paths.nodePaths, |
| 73 | + // These are the reasonable defaults supported by the Node ecosystem. |
| 74 | + // We also include JSX as a common component filename extension to support |
| 75 | + // some tools, although we do not recommend using it, see: |
| 76 | + // https://github.com/facebookincubator/create-react-app/issues/290 |
| 77 | + extensions: ['.js', '.json', '.jsx', ''], |
| 78 | + alias: { |
| 79 | + // Support React Native Web |
| 80 | + // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ |
| 81 | + 'react-native': 'react-native-web' |
| 82 | + } |
| 83 | + }, |
| 84 | + |
| 85 | + module: { |
| 86 | + // First, run the linter. |
| 87 | + // It's important to do this before Babel processes the JS. |
| 88 | + preLoaders: [ |
| 89 | + { |
| 90 | + test: /\.(js|jsx)$/, |
| 91 | + loader: 'eslint', |
| 92 | + include: paths.appSrc, |
| 93 | + } |
| 94 | + ], |
| 95 | + loaders: [ |
| 96 | + // Process JS with Babel. |
| 97 | + { |
| 98 | + test: /\.(js|jsx)$/, |
| 99 | + include: paths.appSrc, |
| 100 | + loader: 'babel', |
| 101 | + query: { |
| 102 | + |
| 103 | + // This is a feature of `babel-loader` for webpack (not Babel itself). |
| 104 | + // It enables caching results in ./node_modules/.cache/react-scripts/ |
| 105 | + // directory for faster rebuilds. We use findCacheDir() because of: |
| 106 | + // https://github.com/facebookincubator/create-react-app/issues/483 |
| 107 | + cacheDirectory: findCacheDir({ |
| 108 | + name: 'react-scripts' |
| 109 | + }) |
| 110 | + } |
| 111 | + }, |
| 112 | + // "postcss" loader applies autoprefixer to our CSS. |
| 113 | + // "css" loader resolves paths in CSS and adds assets as dependencies. |
| 114 | + // "style" loader turns CSS into JS modules that inject <style> tags. |
| 115 | + // In production, we use a plugin to extract that CSS to a file, but |
| 116 | + // in development "style" loader enables hot editing of CSS. |
| 117 | + { |
| 118 | + test: /\.css$/, |
| 119 | + loader: 'style!css!postcss' |
| 120 | + }, |
| 121 | + // JSON is not enabled by default in Webpack but both Node and Browserify |
| 122 | + // allow it implicitly so we also enable it. |
| 123 | + { |
| 124 | + test: /\.json$/, |
| 125 | + loader: 'json' |
| 126 | + }, |
| 127 | + // "file" loader makes sure those assets get served by WebpackDevServer. |
| 128 | + // When you `import` an asset, you get its (virtual) filename. |
| 129 | + // In production, they would get copied to the `build` folder. |
| 130 | + { |
| 131 | + test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, |
| 132 | + loader: 'file', |
| 133 | + query: { |
| 134 | + name: 'static/media/[name].[hash:8].[ext]' |
| 135 | + } |
| 136 | + }, |
| 137 | + // "url" loader works just like "file" loader but it also embeds |
| 138 | + // assets smaller than specified size as data URLs to avoid requests. |
| 139 | + { |
| 140 | + test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, |
| 141 | + loader: 'url', |
| 142 | + query: { |
| 143 | + limit: 10000, |
| 144 | + name: 'static/media/[name].[hash:8].[ext]' |
| 145 | + } |
| 146 | + } |
| 147 | + ] |
| 148 | + }, |
| 149 | + |
| 150 | + // We use PostCSS for autoprefixing only. |
| 151 | + postcss: function() { |
| 152 | + return [ |
| 153 | + autoprefixer({ |
| 154 | + browsers: [ |
| 155 | + '>1%', |
| 156 | + 'last 4 versions', |
| 157 | + 'Firefox ESR', |
| 158 | + 'not ie < 9', // React doesn't support IE8 anyway |
| 159 | + ] |
| 160 | + }), |
| 161 | + ]; |
| 162 | + }, |
| 163 | + plugins: [ |
| 164 | + // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: |
| 165 | + // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> |
| 166 | + // In development, this will be an empty string. |
| 167 | + new InterpolateHtmlPlugin({ |
| 168 | + PUBLIC_URL: publicUrl |
| 169 | + }), |
| 170 | + // Generates an `index.html` file with the <script> injected. |
| 171 | + new HtmlWebpackPlugin({ |
| 172 | + inject: true, |
| 173 | + template: paths.appHtml, |
| 174 | + }), |
| 175 | + // Makes some environment variables available to the JS code, for example: |
| 176 | + // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. |
| 177 | + new webpack.DefinePlugin(env), |
| 178 | + // This is necessary to emit hot updates (currently CSS only): |
| 179 | + new webpack.HotModuleReplacementPlugin(), |
| 180 | + // Watcher doesn't work well if you mistype casing in a path so we use |
| 181 | + // a plugin that prints an error when you attempt to do this. |
| 182 | + // See https://github.com/facebookincubator/create-react-app/issues/240 |
| 183 | + new CaseSensitivePathsPlugin(), |
| 184 | + // If you require a missing module and then `npm install` it, you still have |
| 185 | + // to restart the development server for Webpack to discover it. This plugin |
| 186 | + // makes the discovery automatic so you don't have to restart. |
| 187 | + // See https://github.com/facebookincubator/create-react-app/issues/186 |
| 188 | + new WatchMissingNodeModulesPlugin(paths.appNodeModules) |
| 189 | + ], |
| 190 | + // Some libraries import Node modules but don't use them in the browser. |
| 191 | + // Tell Webpack to provide empty mocks for them so importing them works. |
| 192 | + node: { |
| 193 | + fs: 'empty', |
| 194 | + net: 'empty', |
| 195 | + tls: 'empty' |
| 196 | + } |
| 197 | +}; |
0 commit comments