I want to see my app on the webpage so what do I do? I followed this link
https://github.com/simonqian/react-helloworld
But I didn't get an answer? So pls provide some links to solve the issue
After I started the npm using npm start I faced this type of error? How to resolve this?
This is my web.config.js file. My configuration file will be in the root directory
'use strict';
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: 'E:/react/webnative/main.js',
output: {
// path: 'E:/',
filename: 'index.js',
},
devServer: {
inline: false,
port: 7777,
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.pug$/,
use: ['pug-loader?self'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
loaders: [
{
test: /\.jsx?$/,
//exclude:/(node_modules|bower_components)/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['es2015', 'react'],
},
},
],
},
plugins: [new UglifyJSPlugin()],
};
Your web pack config should look something like this to read .jsx files:
module.exports = {
entry: './app/assets/frontend/myFile.jsx',
output: {
path: __dirname + '/app/assets/javascripts',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}]
}
}
Or just dont use jsx. Hope this Helps!
Related
Being fairly new to the world of react, I'm trying to create a successfully webpack.config.js for my react solution. My webpack.config.js contains the following code:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
title: 'Caching',
template: './index.html'
})
],
output: {
filename: 'main.[hash].js',
chunkFilename: '[name].[hash].[chunkhash].chunk.js',
path: path.resolve(__dirname, 'build'),
clean: true,
publicPath: ""
},
optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: true
}
}
]
},
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=10000&name=img/[name].[ext]'
}
]
}
};
However, when I execute npm run build the following files are created.
enter image description here
And the webpack.plugin interjects this line into my entry point
enter image description here
Which is obvious the wrong name, producing a 404 error message. I have read a number of articles about creating Webpack.config.js but I'm unable to resolve my issue for removing the 404 error and getting the correct filename interjected into my entry point
I'm trying to use webpack to bundle my react project. All the modules and everything loads perfectly fine after I defined the webpack_public_path variable.
Everything but the worker.
const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
mode: "production",
resolve: {
extensions: ["*", ".ts", ".tsx", ".js", ".mjs", ".css", ".ttf"]
},
module: {
rules: [
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
options: {inline: true}
},
},
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ttf$/,
use: ['file-loader']
},
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
}
]
},
plugins: [
new MonacoWebpackPlugin({
languages: ['markdown'],
})
],
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'assets'),
filename: 'graphqlschemaeditor.js'
}
};
This is my webpack.config.js
Does anyone have an idea what I'm doing wrong? Thanks a lot
Have you tried to specify an explicit publicPath?
E.g.
{
loader: 'worker-loader',
options: { publicPath: '/workers/' }
}
This may resolve loading problems.
I'm using webpack config for my react.js application. When i run the command npm run build my images and font files are not build under media directory as i defined in my webpack:
module.exports = {
entry: {
app: ['./app/main.js']
},
output: {
path: path.resolve(process.cwd(), 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: [
'transform-runtime',
'transform-object-rest-spread'
]
}
},
{
test: /\.(css|scss)$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.(eot|woff|woff2|svg|ttf|png|jpg|gif)([\?]?.*)$/,
loader: 'file-loader',
options: {
name: 'media/[name].[ext]'
}
},
{
test: /\.html$/,
loader: 'html'
},
{ // Load JSON-files into code base.
test: /\.json$/,
exclude: /node_modules/,
loader: 'json',
},
]
},
plugins: getPlugins(),
devtool: 'source-map',
};
But the files are placed just inside my dist. What am i missing?
That is the right behaviour. webpack outputs everything fist for your output path, then from that it starts to create folders for loaders. You can't have javascript under /dist and force it to output all other files to /media. It is always going to be everything under your dist.
I tried to add 'target:node' to the webpack.dev.js to exclude node_modules from my bundle file. This results in an error. Now I have 'target:web' but has the node_modules back in. This is my config file for the applicationpart(trying to use DllReferencePlugin):
var path = require("path");
var webpack = require("webpack");
module.exports = {
target:'web',
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
How can I exclude the node_modules folder from the ha.js (app bundle) build? for the complete code see here
Here an example:
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // <---
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
I used the below-mentioned command:
npm install --save-dev babel-preset-stage-0
Now I added it in webpack.config.js file as shown below:
module.exports = {
entry: './app/app.jsx',
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
alias: {
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
};
But Now when I run webpack command it shows some error. Please check error:
Error image:
If you are not using a .babelrc file, add babelrc: false like so:
module: {
loaders: [
{
loader: 'babel-loader',
babelrc: false, // <--- Add this
query: {
presets: ['react', 'es2015', 'stage-0']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
I recommend using the create-react-app CLI if you don't want to deal with the headache of setting up a development environment boilerplate. I just started using it and it is great!