react仪表盘

webpack.config.dev.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. 'use strict';
  2. const autoprefixer = require('autoprefixer');
  3. const path = require('path');
  4. const webpack = require('webpack');
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  6. const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  7. const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8. const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  9. const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
  10. const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
  11. const getClientEnvironment = require('./env');
  12. const paths = require('./paths');
  13. const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  14. // Webpack uses `publicPath` to determine where the app is being served from.
  15. // In development, we always serve from the root. This makes config easier.
  16. const publicPath = '/';
  17. // `publicUrl` is just like `publicPath`, but we will provide it to our app
  18. // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
  19. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
  20. const publicUrl = '';
  21. // Get environment variables to inject into our app.
  22. const env = getClientEnvironment(publicUrl);
  23. // This is the development configuration.
  24. // It is focused on developer experience and fast rebuilds.
  25. // The production configuration is different and lives in a separate file.
  26. module.exports = {
  27. // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
  28. // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
  29. devtool: 'cheap-module-source-map',
  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. // We ship a few polyfills by default:
  35. require.resolve('./polyfills'),
  36. // Include an alternative client for WebpackDevServer. A client's job is to
  37. // connect to WebpackDevServer by a socket and get notified about changes.
  38. // When you save a file, the client will either apply hot updates (in case
  39. // of CSS changes), or refresh the page (in case of JS changes). When you
  40. // make a syntax error, this client will display a syntax error overlay.
  41. // Note: instead of the default WebpackDevServer client, we use a custom one
  42. // to bring better experience for Create React App users. You can replace
  43. // the line below with these two lines if you prefer the stock client:
  44. // require.resolve('webpack-dev-server/client') + '?/',
  45. // require.resolve('webpack/hot/dev-server'),
  46. require.resolve('react-dev-utils/webpackHotDevClient'),
  47. // Finally, this is your app's code:
  48. paths.appIndexJs,
  49. // We include the app code last so that if there is a runtime error during
  50. // initialization, it doesn't blow up the WebpackDevServer client, and
  51. // changing JS code would still trigger a refresh.
  52. ],
  53. output: {
  54. // Add /* filename */ comments to generated require()s in the output.
  55. pathinfo: true,
  56. // This does not produce a real file. It's just the virtual path that is
  57. // served by WebpackDevServer in development. This is the JS bundle
  58. // containing code from all our entry points, and the Webpack runtime.
  59. filename: 'static/js/bundle.js',
  60. // There are also additional JS chunk files if you use code splitting.
  61. chunkFilename: 'static/js/[name].chunk.js',
  62. // This is the URL that app is served from. We use "/" in development.
  63. publicPath: publicPath,
  64. // Point sourcemap entries to original disk location (format as URL on Windows)
  65. devtoolModuleFilenameTemplate: info =>
  66. path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
  67. },
  68. resolve: {
  69. // This allows you to set a fallback for where Webpack should look for modules.
  70. // We placed these paths second because we want `node_modules` to "win"
  71. // if there are any conflicts. This matches Node resolution mechanism.
  72. // https://github.com/facebookincubator/create-react-app/issues/253
  73. modules: ['node_modules', paths.appNodeModules].concat(
  74. // It is guaranteed to exist because we tweak it in `env.js`
  75. process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
  76. ),
  77. // These are the reasonable defaults supported by the Node ecosystem.
  78. // We also include JSX as a common component filename extension to support
  79. // some tools, although we do not recommend using it, see:
  80. // https://github.com/facebookincubator/create-react-app/issues/290
  81. // `web` extension prefixes have been added for better support
  82. // for React Native Web.
  83. extensions: [
  84. '.mjs',
  85. '.web.ts',
  86. '.ts',
  87. '.web.tsx',
  88. '.tsx',
  89. '.web.js',
  90. '.js',
  91. '.json',
  92. '.web.jsx',
  93. '.jsx',
  94. ],
  95. alias: {
  96. // Support React Native Web
  97. // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  98. 'react-native': 'react-native-web',
  99. },
  100. plugins: [
  101. // Prevents users from importing files from outside of src/ (or node_modules/).
  102. // This often causes confusion because we only process files within src/ with babel.
  103. // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
  104. // please link the files into your node_modules/ and let module-resolution kick in.
  105. // Make sure your source files are compiled, as they will not be processed in any way.
  106. new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
  107. new TsconfigPathsPlugin({ configFile: paths.appTsConfig }),
  108. ],
  109. },
  110. module: {
  111. strictExportPresence: true,
  112. rules: [
  113. // TODO: Disable require.ensure as it's not a standard language feature.
  114. // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
  115. // { parser: { requireEnsure: false } },
  116. {
  117. test: /\.(js|jsx|mjs)$/,
  118. loader: require.resolve('source-map-loader'),
  119. enforce: 'pre',
  120. include: paths.appSrc,
  121. },
  122. {
  123. // "oneOf" will traverse all following loaders until one will
  124. // match the requirements. When no loader matches it will fall
  125. // back to the "file" loader at the end of the loader list.
  126. oneOf: [
  127. // "url" loader works like "file" loader except that it embeds assets
  128. // smaller than specified limit in bytes as data URLs to avoid requests.
  129. // A missing `test` is equivalent to a match.
  130. {
  131. test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
  132. loader: require.resolve('url-loader'),
  133. options: {
  134. limit: 10000,
  135. name: 'static/media/[name].[hash:8].[ext]',
  136. },
  137. },
  138. {
  139. test: /\.(js|jsx|mjs)$/,
  140. include: paths.appSrc,
  141. loader: require.resolve('babel-loader'),
  142. options: {
  143. compact: true,
  144. },
  145. },
  146. // Compile .tsx?
  147. {
  148. test: /\.(ts|tsx)$/,
  149. include: paths.appSrc,
  150. use: [
  151. {
  152. loader: require.resolve('ts-loader'),
  153. options: {
  154. // disable type checker - we will use it in fork plugin
  155. transpileOnly: true,
  156. },
  157. },
  158. ],
  159. },
  160. // "postcss" loader applies autoprefixer to our CSS.
  161. // "css" loader resolves paths in CSS and adds assets as dependencies.
  162. // "style" loader turns CSS into JS modules that inject <style> tags.
  163. // In production, we use a plugin to extract that CSS to a file, but
  164. // in development "style" loader enables hot editing of CSS.
  165. {
  166. test: /\.(css|less)$/,
  167. use: [
  168. require.resolve('style-loader'),
  169. {
  170. loader: require.resolve('css-loader'),
  171. options: {
  172. importLoaders: 1,
  173. },
  174. },
  175. {
  176. loader: require.resolve('less-loader'),
  177. options: {
  178. importLoaders: 1
  179. }
  180. },
  181. {
  182. loader: require.resolve('postcss-loader'),
  183. options: {
  184. // Necessary for external CSS imports to work
  185. // https://github.com/facebookincubator/create-react-app/issues/2677
  186. ident: 'postcss',
  187. plugins: () => [
  188. require('postcss-flexbugs-fixes'),
  189. autoprefixer({
  190. browsers: [
  191. '>1%',
  192. 'last 4 versions',
  193. 'Firefox ESR',
  194. 'not ie < 9', // React doesn't support IE8 anyway
  195. ],
  196. flexbox: 'no-2009',
  197. }),
  198. ],
  199. },
  200. },
  201. ],
  202. },
  203. // "file" loader makes sure those assets get served by WebpackDevServer.
  204. // When you `import` an asset, you get its (virtual) filename.
  205. // In production, they would get copied to the `build` folder.
  206. // This loader doesn't use a "test" so it will catch all modules
  207. // that fall through the other loaders.
  208. {
  209. // Exclude `js` files to keep "css" loader working as it injects
  210. // its runtime that would otherwise processed through "file" loader.
  211. // Also exclude `html` and `json` extensions so they get processed
  212. // by webpacks internal loaders.
  213. exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,/\.(css|less)$/],
  214. loader: require.resolve('file-loader'),
  215. options: {
  216. name: 'static/media/[name].[hash:8].[ext]',
  217. },
  218. },
  219. ],
  220. },
  221. // ** STOP ** Are you adding a new loader?
  222. // Make sure to add the new loader(s) before the "file" loader.
  223. ],
  224. },
  225. plugins: [
  226. // Makes some environment variables available in index.html.
  227. // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
  228. // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  229. // In development, this will be an empty string.
  230. new InterpolateHtmlPlugin(env.raw),
  231. // Generates an `index.html` file with the <script> injected.
  232. new HtmlWebpackPlugin({
  233. inject: true,
  234. template: paths.appHtml,
  235. }),
  236. // Add module names to factory functions so they appear in browser profiler.
  237. new webpack.NamedModulesPlugin(),
  238. // Makes some environment variables available to the JS code, for example:
  239. // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
  240. new webpack.DefinePlugin(env.stringified),
  241. // This is necessary to emit hot updates (currently CSS only):
  242. new webpack.HotModuleReplacementPlugin(),
  243. // Watcher doesn't work well if you mistype casing in a path so we use
  244. // a plugin that prints an error when you attempt to do this.
  245. // See https://github.com/facebookincubator/create-react-app/issues/240
  246. new CaseSensitivePathsPlugin(),
  247. // If you require a missing module and then `npm install` it, you still have
  248. // to restart the development server for Webpack to discover it. This plugin
  249. // makes the discovery automatic so you don't have to restart.
  250. // See https://github.com/facebookincubator/create-react-app/issues/186
  251. new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  252. // Moment.js is an extremely popular library that bundles large locale files
  253. // by default due to how Webpack interprets its code. This is a practical
  254. // solution that requires the user to opt into importing specific locales.
  255. // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
  256. // You can remove this if you don't use Moment.js:
  257. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  258. // Perform type checking and linting in a separate process to speed up compilation
  259. new ForkTsCheckerWebpackPlugin({
  260. async: false,
  261. watch: paths.appSrc,
  262. tsconfig: paths.appTsConfig,
  263. tslint: paths.appTsLint,
  264. }),
  265. ],
  266. // Some libraries import Node modules but don't use them in the browser.
  267. // Tell Webpack to provide empty mocks for them so importing them works.
  268. node: {
  269. dgram: 'empty',
  270. fs: 'empty',
  271. net: 'empty',
  272. tls: 'empty',
  273. child_process: 'empty',
  274. },
  275. // Turn off performance hints during development because we don't do any
  276. // splitting or minification in interest of speed. These warnings become
  277. // cumbersome.
  278. performance: {
  279. hints: false,
  280. },
  281. };