Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
webpack.config.dev.js 9.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 path = require('path');
13 
var autoprefixer = require('autoprefixer');
14 
var webpack = require('webpack');
15 
var findCacheDir = require('find-cache-dir');
16 
var HtmlWebpackPlugin = require('html-webpack-plugin');
17 
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
18 
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
19 
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
20 
var getClientEnvironment = require('./env');
21 
var paths = require('./paths');
22
23 
// Webpack uses `publicPath` to determine where the app is being served from.
24 
// In development, we always serve from the root. This makes config easier.
25 
var publicPath = '/';
26 
// `publicUrl` is just like `publicPath`, but we will provide it to our app
27 
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
28 
// Omit trailing shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
29 
var publicUrl = '';
30 
// Get enrivonment variables to inject into our app.
31 
var env = getClientEnvironment(publicUrl);
32
33 
// This is the development configuration.
34 
// It is focused on developer experience and fast rebuilds.
35 
// The production configuration is different and lives in a separate file.
36 
module.exports = {
37 
  // This makes the bundle appear split into separate modules in the devtools.
38 
  // We don't use source maps here because they can be confusing:
39 
  // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
40 
  // You may want 'cheap-module-source-map' instead if you prefer source maps.
41 
  devtool: 'eval',
42 
  // These are the "entry points" to our application.
43 
  // This means they will be the "root" imports that are included in JS bundle.
44 
  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
45 
  entry: [
46 
    // Include WebpackDevServer client. It connects to WebpackDevServer via
47 
    // sockets and waits for recompile notifications. When WebpackDevServer
48 
    // recompiles, it sends a message to the client by socket. If only CSS
49 
    // was changed, the app reload just the CSS. Otherwise, it will refresh.
50 
    // The "?/" bit at the end tells the client to look for the socket at
51 
    // the root path, i.e. /sockjs-node/. Otherwise visiting a client-side
52 
    // route like /todos/42 would make it wrongly request /todos/42/sockjs-node.
53 
    // The socket server is a part of WebpackDevServer which we are using.
54 
    // The /sockjs-node/ path I'm referring to is hardcoded in WebpackDevServer.
55 
    require.resolve('webpack-dev-server/client') + '?/',
56 
    // Include Webpack hot module replacement runtime. Webpack is pretty
57 
    // low-level so we need to put all the pieces together. The runtime listens
58 
    // to the events received by the client above, and applies updates (such as
59 
    // new CSS) to the running application.
60 
    require.resolve('webpack/hot/dev-server'),
61 
    // We ship a few polyfills by default.
62 
    require.resolve('./polyfills'),
63 
    // Finally, this is your app's code:
64 
    paths.appIndexJs
65 
    // We include the app code last so that if there is a runtime error during
66 
    // initialization, it doesn't blow up the WebpackDevServer client, and
67 
    // changing JS code would still trigger a refresh.
68 
  ],
69 
  output: {
70 
    // Next line is not used in dev but WebpackDevServer crashes without it:
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
path: paths.appBuild, // Add /* filename */ comments to generated require()s in the output. pathinfo: true, // This does not produce a real file. It's just the virtual path that is // served by WebpackDevServer in development. This is the JS bundle // containing code from all our entry points, and the Webpack runtime. filename: 'static/js/bundle.js', // This is the URL that app is served from. We use "/" in development. 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', query: { // @remove-on-eject-begin babelrc: false, presets: [require.resolve('babel-preset-react-app')], // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/react-scripts/ // directory for faster rebuilds. We use findCacheDir() because of: // https://github.com/facebookincubator/create-react-app/issues/483 cacheDirectory: findCacheDir({ name: 'react-scripts' }) } }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader turns CSS into JS modules that inject <style> tags. // In production, we use a plugin to extract that CSS to a file, but
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
// in development "style" loader enables hot editing of CSS. { test: /\.css$/, loader: 'style!css!postcss' }, // 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 get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. { 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: { 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 development, this will be an empty string. new InterpolateHtmlPlugin({ PUBLIC_URL: publicUrl }), // Generates an `index.html` file with the <script> injected. new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, }), // Makes some environment variables available to the JS code, for example: // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. new webpack.DefinePlugin(env), // This is necessary to emit hot updates (currently CSS only): new webpack.HotModuleReplacementPlugin(),
211212213214215216217218219220221222223224225226227228229
// Watcher doesn't work well if you mistype casing in a path so we use // a plugin that prints an error when you attempt to do this. // See https://github.com/facebookincubator/create-react-app/issues/240 new CaseSensitivePathsPlugin(), // If you require a missing module and then `npm install` it, you still have // to restart the development server for Webpack to discover it. This plugin // makes the discovery automatic so you don't have to restart. // See https://github.com/facebookincubator/create-react-app/issues/186 new WatchMissingNodeModulesPlugin(paths.appNodeModules) ], // 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' } };