If your code isn’t being recompiled, try increasing the number of watchers (in Ubuntu): echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Source: https://webpack.github.io/docs/troubleshooting.html
You should set historyApiFallback of WebpackDevServer as true for this to work. Here’s a small example (tweak to fit your purposes): var webpack = require(‘webpack’); var WebpackDevServer = require(‘webpack-dev-server’); var config = require(‘./webpack.config’); var port = 4000; var ip = ‘0.0.0.0’; new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, historyApiFallback: true, }).listen(port, ip, function (err) { if(err) { … Read more
Version Installed: Using webpack CLI: (–version, -v Show version number [boolean]) webpack –version or: webpack -v Using npm list command: npm list webpack Results in name@version-range: <projectName>@<projectVersion> /path/to/project └── webpack@<version-range> Using yarn list command: yarn list webpack How to do it programmatically? Webpack 2 introduced Configuration Types. Instead of exporting a configuration object, you may … Read more
It’s not possible to modify the default configuration. You can use the optimization.minimizer setting to instantiate your own UglifyJsPlugin, however. Using 4.0 we used this example to get source maps even when mode is set to ‘production’ for example (no longer necessary as of 4.1.1): const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’); module.exports = { optimization: { minimizer: … Read more
Sorry for picking up old question, but react-scripts actually uses dotenv library under the hood. With react-scripts@0.2.3 and higher, you can work with environment variables this way: create .env file in the root of the project set environment variables starting with REACT_APP_ there access it by process.env.REACT_APP_… in components .env REACT_APP_BASE_URL=http://localhost:3000 App.js const BASE_URL = … Read more
Grunt and Gulp are actually task runners, and they have differences like config driven tasks versus stream based transformations. Each has its own strengths and weaknesses, but at the end of the day, they pretty much help you create tasks that can be run to solve a larger build problem. Most of the time, they … Read more
With webpack you can put env-specific config into the externals field in webpack.config.js externals: { ‘Config’: JSON.stringify(process.env.NODE_ENV === ‘production’ ? { serverUrl: “https://myserver.com” } : { serverUrl: “http://localhost:8090” }) } If you want to store the configs in a separate JSON file, that’s possible too, you can require that file and assign to Config: externals: … Read more
I imagine you got this working by now, but for anyone else that finds this, you set your default environment variables in a .env file at the root of your “create-react-app” project. To separate out the variables used when using npm start and npm run build you can create two more env files – .env.development … Read more
You’re using a combination of Babel 6 and Babel 7. There is no guarantee of compatibility across versions: “@babel/core”: “^7.0.0-beta.40”, “babel-cli”: “^6.26.0”, “babel-loader”: “^8.0.0-beta.0”, “babel-plugin-lodash”: “^3.3.2”, “babel-plugin-react-transform”: “^3.0.0”, “babel-preset-react”: “^6.24.1”, should be “@babel/core”: “^7.0.0-beta.40”, “@babel/cli”: “^7.0.0-beta.40”, “babel-loader”: “^8.0.0-beta.0”, “babel-plugin-lodash”: “^3.3.2”, “babel-plugin-react-transform”: “^3.0.0”, “@babel/preset-react”: “^7.0.0-beta.40”, and query: { presets: [‘react’, ‘es2015’], plugins: [‘transform-class-properties’] } would be … Read more
One of the main features of webpack’s compiler is to recursively parse all the modules, starting from the entries, to build a graph of all the module dependencies by analyzing require(), require.context(), import and import() expressions. The usual interpretation of “context” in webpack, and similarly in Node.js, is some directory that is used as a … Read more