Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
webpack.config.dev.js 7.94 KiB
1 
/**
2 
 * Copyright (c) 2015-present, Facebook, Inc.
3 
 * All rights reserved.
4 
 *
5 
 * This source code is licensed under the BSD-style license found in the
6 
 * LICENSE file in the root directory of this source tree. An additional grant
7 
 * of patent rights can be found in the PATENTS file in the same directory.
8 
 */
9
10 
var path = require('path');
11 
var autoprefixer = require('autoprefixer');
12 
var webpack = require('webpack');
13 
var HtmlWebpackPlugin = require('html-webpack-plugin');
14 
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
15 
var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
16 
var paths = require('./paths');
17 
var env = require('./env');
18
19 
// This is the development configuration.
20 
// It is focused on developer experience and fast rebuilds.
21 
// The production configuration is different and lives in a separate file.
22 
module.exports = {
23 
  // This makes the bundle appear split into separate modules in the devtools.
24 
  // We don't use source maps here because they can be confusing:
25 
  // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
26 
  // You may want 'cheap-module-source-map' instead if you prefer source maps.
27 
  devtool: 'eval',
28 
  // These are the "entry points" to our application.
29 
  // This means they will be the "root" imports that are included in JS bundle.
30 
  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
31 
  entry: [
32 
    // Include WebpackDevServer client. It connects to WebpackDevServer via
33 
    // sockets and waits for recompile notifications. When WebpackDevServer
34 
    // recompiles, it sends a message to the client by socket. If only CSS
35 
    // was changed, the app reload just the CSS. Otherwise, it will refresh.
36 
    // The "?/" bit at the end tells the client to look for the socket at
37 
    // the root path, i.e. /sockjs-node/. Otherwise visiting a client-side
38 
    // route like /todos/42 would make it wrongly request /todos/42/sockjs-node.
39 
    // The socket server is a part of WebpackDevServer which we are using.
40 
    // The /sockjs-node/ path I'm referring to is hardcoded in WebpackDevServer.
41 
    require.resolve('webpack-dev-server/client') + '?/',
42 
    // Include Webpack hot module replacement runtime. Webpack is pretty
43 
    // low-level so we need to put all the pieces together. The runtime listens
44 
    // to the events received by the client above, and applies updates (such as
45 
    // new CSS) to the running application.
46 
    require.resolve('webpack/hot/dev-server'),
47 
    // We ship a few polyfills by default.
48 
    require.resolve('./polyfills'),
49 
    // Finally, this is your app's code:
50 
    path.join(paths.appSrc, 'index')
51 
    // We include the app code last so that if there is a runtime error during
52 
    // initialization, it doesn't blow up the WebpackDevServer client, and
53 
    // changing JS code would still trigger a refresh.
54 
  ],
55 
  output: {
56 
    // Next line is not used in dev but WebpackDevServer crashes without it:
57 
    path: paths.appBuild,
58 
    // Add /* filename */ comments to generated require()s in the output.
59 
    pathinfo: true,
60 
    // This does not produce a real file. It's just the virtual path that is
61 
    // served by WebpackDevServer in development. This is the JS bundle
62 
    // containing code from all our entry points, and the Webpack runtime.
63 
    filename: 'static/js/bundle.js',
64 
    // In development, we always serve from the root. This makes config easier.
65 
    publicPath: '/'
66 
  },
67 
  resolve: {
68 
    // These are the reasonable defaults supported by the Node ecosystem.
69 
    extensions: ['.js', '.json', ''],
70 
    alias: {
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// This `alias` section can be safely removed after ejection. // We do this because `babel-runtime` may be inside `react-scripts`, // so when `babel-plugin-transform-runtime` imports it, it will not be // available to the app directly. This is a temporary solution that lets // us ship support for generators. However it is far from ideal, and // if we don't have a good solution, we should just make `babel-runtime` // a dependency in generated projects. // See https://github.com/facebookincubator/create-react-app/issues/255 'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'), 'react-native': 'react-native-web' } }, // Resolve loaders (webpack plugins for CSS, images, transpilation) from the // directory of `react-scripts` itself rather than the project directory. // You can remove this after ejecting. resolveLoader: { root: paths.ownNodeModules, moduleTemplates: ['*-loader'] }, module: { // First, run the linter. // It's important to do this before Babel processes the JS. preLoaders: [ { test: /\.js$/, loader: 'eslint', include: paths.appSrc, } ], loaders: [ // Process JS with Babel. { test: /\.js$/, include: paths.appSrc, loader: 'babel', query: require('./babel.dev') }, // "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 // in development "style" loader enables hot editing of CSS. { test: /\.css$/, include: [paths.appSrc, paths.appNodeModules], 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$/, include: [paths.appSrc, paths.appNodeModules], 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: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, include: [paths.appSrc, paths.appNodeModules], loader: 'file', query: { name: 'static/media/[name].[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)(\?.*)?$/, include: [paths.appSrc, paths.appNodeModules],
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
loader: 'url', query: { limit: 10000, name: 'static/media/[name].[ext]' } } ] }, // Point ESLint to our predefined config. eslint: { configFile: path.join(__dirname, 'eslint.js'), useEslintrc: false }, // 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: [ // Generates an `index.html` file with the <script> injected. new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, favicon: paths.appFavicon, }), // 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(), // 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) ] };