here is my webpack.config.json.
var webpack = require('webpack');
module.exports = {
context: __dirname + '/src',
entry: {
app: './app.js',
vendor: ['angular', 'angular-ui-router']
},
output: {
path: __dirname + '/js',
filename: 'app.bundle.js'
},
module:{
loaders: [
{
test: /\.scss$/,
loader: "style!css!sass",
exclude: /node_modules/
}
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
]
};
how do I turn on hot module replacement, I am using a webpack-dev-server, here is my package.json
{
"name": "trainingapp",
"version": "1.0.0",,
"main": "app.js",
"scripts": {
"build": "webpack --bail --progress --profile",
"server": "webpack-dev-server ./app.js --hot --inline --module-bind --progress --history-api-fallback",
"start": "npm run server"
},
"devDependencies": {
"angular": "^1.6.0",
"angular-ui-router": "^0.3.2",
"css-loader": "^0.26.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}
Currently I need to refresh my browser to reflect the changes done in my code,I guess enabling hmr will also trigger css changes as well.
since you're using ui-router,
give this loader a try Angular Hot Loader
I tried it and it seems working except for templates.
Related
So I am doing a project using Django and React.
I was working on it yesterday and it worked fine, but today after I run the command 'py ./manage.py runserver' along with 'npm run dev', my project loads but whenever I make changes to my code, these changes are not reflected when I update the page.
I tried fixing this but couldn't do it so far.
Here are my files:
webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV' : JSON.stringify('development')
// This has effect on the react lib size
}),
],
};
package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"start": "react-scripts start",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"webpack": "^5.34.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0"
}
}
Please consider to try this:
Create a .env file inside your Application root
Set FAST_REFRESH=false inside your .env
Restart your Server
I am trying to create a react app using webpack and babel,but when i actually start webpack dev server,using yarn run start,it shows the following error:-
i am using babel-loader version 8.1.0 and #babel/core version 7.10.2
My package.json:-
{
"name": "reactTemplate",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"babel-loader": "^8.1.0",
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2",
"#babel/preset-react": "^7.10.1",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
My .babelrc:-
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
My webpack.config.js:-
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index',
output: {
path: path.join(__dirname, './dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
If you are running a very simple hello world example and extension is js then your settings seem fine. If you are using jsx files as well the add this to the webpack
test: /\.(js|jsx)$/,
hello i just made environment setup for react js and it gives me error
ReferenceError: Unknown option: .present. and here is codes of .babelrc webpack.config.js, package.json and react.js (file)
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
webpack.config.js :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './react.js',
output:{
path: path.join(__dirname, '/frapp'),
filename: 'bundled.js'
},
devServer:{
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
present:['es2015', 'react']
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
package.json :
{
"name": "reacc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}
for more details i would like to screenshot my directory here it is
here is part of error : Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown option: .present. Check out https://babeljs.io/docs/en/b
abel-core/#options for more information about options.
as a matter of fact, react is opens html page but does not display text in div
It's presets, not present:['es2015', 'react']. There's a typo in your webpack.config.js.
Also what's that query key?
query: {
present:['es2015', 'react']
}
From what I know it should be options. So:
options: {
presets: ['es2015', 'react']
}
I have recently updated my react-native-web project to use a more recent react native version to use a more recent expo version.
with the help of npm I have now a fully functional updated code running on ios and android.
However I have still difficulties running it on webpack with different problems related (to the best of my understanding) to a webpack that needs to be updated as well to a higher version (2 -> 3or4).
in this process I have found difficulties matching the right webpack version to the right dev-server and cli.
here is my package.json
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-plugin-expo-web": "^0.0.5",
"babel-plugin-react-native-web": "0.9.9",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-imports": "1.4.1",
"babel-plugin-transform-runtime": "6.23.0",
"css-loader": "0.28.7",
"docz": "^0.12.16",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.7",
"gh-pages": "^1.2.0",
"jest-expo": "^30.0.0",
"react-native-scripts": "^2.0.1",
"react-styleguidist": "^8.0.6",
"react-test-renderer": "16.4.1",
"style-loader": "^0.19.0",
"sw-precache-webpack-plugin": "^0.11.5",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry-web.js",
"scripts": {
"start": "expo start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest",
"clean": "rm -rf node_modules && yarn cache clean && npm cache clean --force",
"make": "yarn",
"docu:dev": "docz dev",
"docu:build": "docz build",
"web": "webpack-dev-server -d --config ./webpack.config.js --env dev --inline --hot --colors --content-base app/ --history-api-fallback",
"build:dev": "NODE_ENV=production webpack --env dev --config ./webpack.config.js",
"build:prod": "NODE_ENV=production webpack --env prod --config ./webpack.config.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#sentry/browser": "^4.4.1",
"#sentry/cli": "^1.31.0",
"audit": "0.0.6",
"babel-plugin-transform-remove-console": "^6.9.4",
"es6-symbol": "^3.1.1",
"expo": "^30.0.0",
"expo-analytics": "1.0.7",
"expo-firebase-crashlytics": "1.0.0",
"expo-web": "0.0.14",
"firebase": "^5.0.4",
"jsc-android": "^224109.1.0",
"mobx": "4",
"mobx-react": "5.1.0",
"npm": "^6.5.0",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "16.5.1",
"react-art": "16.5.1",
"react-css-blur": "^1.1.1",
"react-dom": "^16.5.1",
"react-markdown": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-native-blur": "^3.2.2",
"react-native-camera-roll-picker": "^1.2.3",
"react-native-dialog": "^5.4.0",
"react-native-simple-markdown": "^1.1.0",
"react-native-web": "0.9.0",
"react-native-web-svg": "1.0.0",
"react-navigation": "~2.3.1",
"sentry-expo": "^1.11.0",
"sweetalert": "2.1.2",
"uglifyjs-webpack-plugin": "1",
"webpack": "^4.0.0",
"webpack-dev-server": "^3.1.10",
"ws": "^6.0.0"
}
And now I would like to know and understand what I should change web-wise to make my yarn run web script work again, basically.
//web/webpack.config.js
const path = require("path");
const webpack = require("webpack");
const appDirectory = path.resolve(__dirname, "./");
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// 'node_module'.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, "src"),
path.resolve(appDirectory, "node_modules/react-navigation"),
path.resolve(appDirectory, "node_modules/react-native-tab-view"),
path.resolve(appDirectory, "node_modules/react-native-paper"),
path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
path.resolve(appDirectory, "node_modules/react-native-safe-area-view"),
path.resolve(appDirectory, "node_modules/#expo/samples"),
path.resolve(appDirectory, "node_modules/#expo/vector-icons"),
path.resolve(appDirectory, "node_modules/react-native-platform-touchable"),
],
use: {
loader: "babel-loader",
options: {
// cacheDirectory: false,
babelrc: false,
sourceMaps: true,
// minimize: false,
// Babel configuration (or use .babelrc)
// This aliases 'react-native' to 'react-native-web' and includes only
// the modules needed by the app.
plugins: [
"expo-web",
"react-native-web",
"transform-decorators-legacy",
["transform-runtime", { helpers: true, polyfill: true, regenerator: true }],
],
// The 'react-native' preset is recommended to match React Native's packager
presets: ["react-native"],
},
},
};
// This is needed for loading css
const cssLoaderConfiguration = {
test: /\.css$/,
use: ["style-loader", "css-loader"],
};
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
},
},
};
const ttfLoaderConfiguration = {
test: /\.ttf$/,
use: [
{
loader: "file-loader",
options: {
name: "./fonts/[hash].[ext]",
},
},
],
include: [
path.resolve(appDirectory, "./src/assets/fonts"),
path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
],
};
module.exports = {
// your web-specific entry file
entry: path.resolve(appDirectory, "src/index.js"),
devtool: "#eval-source-map",
// mode: 'development',
// configures where the build ends up
output: {
filename: "bundle.js",
publicPath: "/assets/",
path: path.resolve(appDirectory, "./app/assets"),
},
module: {
rules: [
babelLoaderConfiguration,
cssLoaderConfiguration,
imageLoaderConfiguration,
ttfLoaderConfiguration,
],
},
plugins: [
// process.env.NODE_ENV === 'production' must be true for production
// builds to eliminate development checks and reduce build size. You may
// wish to include additional optimizations.
// https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/206#issuecomment-358015555
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"), //JSON.stringify("production")
__DEV__: process.env.NODE_ENV === "production" || true,
}),
],
resolve: {
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// '.web.js'.
symlinks: false,
extensions: [".web.js", ".js", ".json"],
alias: {
"./assets/images/expo-icon.png": "./assets/images/expo-icon#2x.png",
"./assets/images/slack-icon.png": "./assets/images/slack-icon#2x.png",
"#expo/vector-icons": "expo-web",
expo: "expo-web",
"react-native$": "react-native-web",
'react-native-svg$': 'react-native-web-svg',
"babel-runtime/regenerator": require.resolve("babel-runtime/regenerator"),
},
},
};
Thanks to all.
I'm making MERN (with React in Front-end and Express in Back-end) based application from a scratch. And I want webpack to reload page every time I save files. But it's not working.
My webpack.config.js
const path = require('path');
const entryFile = path.resolve(__dirname, 'src', 'client', 'app.js');
const outputDir = path.resolve(__dirname, 'public');
module.exports = {
entry: ['babel-polyfill', entryFile],
output: {
filename: 'bundle.js',
path: outputDir
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(scss|css)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader'
}
]
}
]
}
};
my package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node src/server/app.js",
"prestart": "webpack --mode development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/2u4u/share-book.git"
},
...
"dependencies": {
"express": "^4.16.3",
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.5"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"node-sass": "^4.9.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"webpack-cli": "^3.1.0",
"webpack-command": "^0.4.1"
}
}
I tried to add watch: true in the end of webpack config, but it's not starting server then. Where is the problem?
UPD: Can problem be in server/app.js?
import express from 'express';
import path from 'path';
const app = express();
const publicPath = path.resolve(__dirname, '..', '..', 'public');
app.use(express.static(publicPath));
app.listen(3000, () => {
console.log(`NEW one MERN Boilerplate listening on port 3000 and looking in folder ${publicPath}`);
});
Add -- hot in your dev script it should work if you’re using webpack v4. Otherwise you can add hot module in your webpack config.
The following should be your devDependencies
"dependencies": {
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.5"
},
and make changes in your "start and "prestart" script:
"prestart": webpack-dev-server --mode development --config webpack.config.js --open --hot
"start": "babel-node nodemon src/server/app.js",
You can directly add watch to prestart script in package.json
"prestart": "webpack --mode development" --watch --hot
OR
add devserver in webpack.config.js file something like below
devServer: {
contentBase: './public',
hot: true,
watch: true
}
"prestart": "webpack --mode development --watch"
Simple and easy. This has to be ran into one terminal, the server in another one.