Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Donald Hruska's avatar
    Don't assume the project is hosted at the root (#94) · ef4f8e90
    Donald Hruska authored 
    * Don't assume the project is hosted at the root
* Require package.json in webpack.config.prod.js and use homepage if set; otherwise use '/'

* Fix package.json path and add sample package.json for tests

* Update publicPath to use relative path portion of URL defined in homepage

* Update successful bundle generation message

* Show bundle generation success message based on presence of homepage in package.json
    ef4f8e90
webpack.config.dev.js 8.47 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 WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
18 
var paths = require('./paths');
19 
var env = require('./env');
20
21 
// This is the development configuration.
22 
// It is focused on developer experience and fast rebuilds.
23 
// The production configuration is different and lives in a separate file.
24 
module.exports = {
25 
  // This makes the bundle appear split into separate modules in the devtools.
26 
  // We don't use source maps here because they can be confusing:
27 
  // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
28 
  // You may want 'cheap-module-source-map' instead if you prefer source maps.
29 
  devtool: 'eval',
30 
  // These are the "entry points" to our application.
31 
  // This means they will be the "root" imports that are included in JS bundle.
32 
  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
33 
  entry: [
34 
    // Include WebpackDevServer client. It connects to WebpackDevServer via
35 
    // sockets and waits for recompile notifications. When WebpackDevServer
36 
    // recompiles, it sends a message to the client by socket. If only CSS
37 
    // was changed, the app reload just the CSS. Otherwise, it will refresh.
38 
    // The "?/" bit at the end tells the client to look for the socket at
39 
    // the root path, i.e. /sockjs-node/. Otherwise visiting a client-side
40 
    // route like /todos/42 would make it wrongly request /todos/42/sockjs-node.
41 
    // The socket server is a part of WebpackDevServer which we are using.
42 
    // The /sockjs-node/ path I'm referring to is hardcoded in WebpackDevServer.
43 
    require.resolve('webpack-dev-server/client') + '?/',
44 
    // Include Webpack hot module replacement runtime. Webpack is pretty
45 
    // low-level so we need to put all the pieces together. The runtime listens
46 
    // to the events received by the client above, and applies updates (such as
47 
    // new CSS) to the running application.
48 
    require.resolve('webpack/hot/dev-server'),
49 
    // We ship a few polyfills by default.
50 
    require.resolve('./polyfills'),
51 
    // Finally, this is your app's code:
52 
    paths.appIndexJs
53 
    // We include the app code last so that if there is a runtime error during
54 
    // initialization, it doesn't blow up the WebpackDevServer client, and
55 
    // changing JS code would still trigger a refresh.
56 
  ],
57 
  output: {
58 
    // Next line is not used in dev but WebpackDevServer crashes without it:
59 
    path: paths.appBuild,
60 
    // Add /* filename */ comments to generated require()s in the output.
61 
    pathinfo: true,
62 
    // This does not produce a real file. It's just the virtual path that is
63 
    // served by WebpackDevServer in development. This is the JS bundle
64 
    // containing code from all our entry points, and the Webpack runtime.
65 
    filename: 'static/js/bundle.js',
66 
    // In development, we always serve from the root. This makes config easier.
67 
    publicPath: '/'
68 
  },
69 
  resolve: {
70 
    // This allows you to set a fallback for where Webpack should look for modules.
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// 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' } }, // 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|jsx)$/, loader: 'eslint', include: paths.appSrc, } ], loaders: [ // Process JS with Babel. { test: /\.(js|jsx)$/, 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$/, 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)(\?.*)?$/, exclude: /\/favicon.ico$/, loader: 'file', query: { name: 'static/media/[name].[hash:8].[ext]' } }, // A special case for favicon.ico to place it into build root directory. { test: /\/favicon.ico$/,
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
include: [paths.appSrc], loader: 'file', query: { name: 'favicon.ico?[hash:8]' } }, // "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]' } }, // "html" loader is used to process template page (index.html) to resolve // resources linked with <link href="./relative/path"> HTML tags. { test: /\.html$/, loader: 'html', query: { attrs: ['link:href'], } } ] }, // 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, }), // 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) ] };