Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Ville Immonen's avatar
    Remove custom babel-loader cache dir config (#983) · 6bda4b97
    Ville Immonen authored 
    Upgrade `babel-loader` and remove the cache directory configuration
that was added in #620. `babel-loader` now uses the
`./node_modules/.cache/babel-loader` directory by default, so the
custom config is no longer needed.
    6bda4b97
webpack.config.dev.js 9.19 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 CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
17 
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
18 
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
19 
var getClientEnvironment = require('./env');
20 
var paths = require('./paths');
21
22 
// Webpack uses `publicPath` to determine where the app is being served from.
23 
// In development, we always serve from the root. This makes config easier.
24 
var publicPath = '/';
25 
// `publicUrl` is just like `publicPath`, but we will provide it to our app
26 
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
27 
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
28 
var publicUrl = '';
29 
// Get environment variables to inject into our app.
30 
var env = getClientEnvironment(publicUrl);
31
32 
// This is the development configuration.
33 
// It is focused on developer experience and fast rebuilds.
34 
// The production configuration is different and lives in a separate file.
35 
module.exports = {
36 
  // This makes the bundle appear split into separate modules in the devtools.
37 
  // We don't use source maps here because they can be confusing:
38 
  // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
39 
  // You may want 'cheap-module-source-map' instead if you prefer source maps.
40 
  devtool: 'eval',
41 
  // These are the "entry points" to our application.
42 
  // This means they will be the "root" imports that are included in JS bundle.
43 
  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
44 
  entry: [
45 
    // Include an alternative client for WebpackDevServer. A client's job is to
46 
    // connect to WebpackDevServer by a socket and get notified about changes.
47 
    // When you save a file, the client will either apply hot updates (in case
48 
    // of CSS changes), or refresh the page (in case of JS changes). When you
49 
    // make a syntax error, this client will display a syntax error overlay.
50 
    // Note: instead of the default WebpackDevServer client, we use a custom one
51 
    // to bring better experience for Create React App users. You can replace
52 
    // the line below with these two lines if you prefer the stock client:
53 
    // require.resolve('webpack-dev-server/client') + '?/',
54 
    // require.resolve('webpack/hot/dev-server'),
55 
    require.resolve('react-dev-utils/webpackHotDevClient'),
56 
    // We ship a few polyfills by default:
57 
    require.resolve('./polyfills'),
58 
    // Finally, this is your app's code:
59 
    paths.appIndexJs
60 
    // We include the app code last so that if there is a runtime error during
61 
    // initialization, it doesn't blow up the WebpackDevServer client, and
62 
    // changing JS code would still trigger a refresh.
63 
  ],
64 
  output: {
65 
    // Next line is not used in dev but WebpackDevServer crashes without it:
66 
    path: paths.appBuild,
67 
    // Add /* filename */ comments to generated require()s in the output.
68 
    pathinfo: true,
69 
    // This does not produce a real file. It's just the virtual path that is
70 
    // served by WebpackDevServer in development. This is the JS bundle
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// 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/babel-loader/ // directory for faster rebuilds. cacheDirectory: true } }, // "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$/, loader: 'style!css?importLoaders=1!postcss' }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
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(), // 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
211212213214215216217218219220221
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' } };