I'm new to WebPack and React, and am having an issue getting my settings correct.
My directory structure is:
/project/
/src/
index.html
app.js
/static/
/images
My "output" WebPack config section is:
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
My React app runs fine, but I'm not getting any images served with urls as such:
<img src="/static/images/logo.jpg" />
If I change the image src values to:
<img src="/src/static/images/logo.jpg" />
they work, but of course, that's not going to be the case in production, since the /src/ directory wouldn't be deployed. It seems I have the root set incorrectly.
Do I need to tell WebPack to copy the "static" directory into "dist"? or? Advice appreciated.
After some digging, what I actually wanted was: https://webpack.github.io/docs/webpack-dev-server.html#content-base
Then I modified my npm start script to:
"./node_modules/.bin/webpack-dev-server --hot --inline --progress --content-base src/"
and now relative image paths are happy again.
You can import (or require) images with webpack.
Add the file-loader to the webpack config (make sure file-loader is installed):
{
test: /\.(png|gif|jpg)$/,
include: [
path.join(__dirname, 'static')
],
loader: 'file',
}
You can then import an image:
import Image1 from '../static/images/image1.png';
and use it like this:
<img src={Image1} width="64" height="64" />
Webpack will place all imported images in the "dist" directory.
Related
I've create a react app through the create-react-app package and I want to get a Add To Homescreen button on my app. I run my development server from yarn start on localhost:8080. I've added the Bypass user engagement checks in Chrome through > chrome://flags/#bypass-app-banner-engagement-checks
I navigate to my app in my browser (on the pc) and go into responsive manipulation, but I see a error in the log:
Site cannot be installed: Page has no manifest URL
The create-react-app plugin puts the Manifest in the ./public folder but I'm using webpack-dev-server to start the app "start": "webpack-dev-server --mode development --open --hot --env.presets serviceworker",
In my webpack.config.js I have:
module.exports = {
entry: './src/index.tsx',
devServer: {
contentBase: '/public'
},
My ./public folder contains the manifest.json file. But when I start the app I get the error:
Site cannot be installed: Page has no manifest URL
I think my webpack is not pointing to the correct folder, or the webpack config is wrong some other way.
The path in the contentBase should start with a .. So:
devServer: {
contentBase: './public'
},
And in my src/index.html:
<link href="manifest.json" rel="manifest" />
Now the manifest is loaded.
In my app js
app.use(express.static(join(__dirname, '/dist')))
Webpack config:
module.exports = {
entry: "./src/main.js",
output: {
path: join(__dirname, "/dist/js/"),
filename: "bundle.js",
publicPath: "/"
},
mode: "development"
// ...
};
In my footer.hbs
<script src="/js/bundle.js"></script>
In my package.json Scripts
"startw": "webpack-dev-server --open",
"server": "node app.js",
When I make a change in any js file, webpack is compiling but it does not overwrite /js/bundle.js. How can I make webpack recompile my changed bundle js to overwrite dist/js/bundle.js ?
I have tried
https://webpack.js.org/guides/development/#using-webpack-dev-server
and
webpack-dev-middleware
For production, I use
"dev": "./node_modules/.bin/webpack -p --watch",
This compiled as expected to dist/js/bundle.js but this is tedious to run it each time I make a simple change to a js file.
I want to inject the auto compiled output js to use it in my app. I dont mind refreshing the page myself and do not care if I dont get to use HMR.
My project directory Structure is :
mcdist <build output folder>
- assets
index.html
- css
main.css
- js
app.js
lib.js
- ng-app
<all HTML Files>
- images
src
- images
1.png
2.png
- javascripts
- ng-app
- components
1.js
- directives
2.js
- filters
3.js
- stylesheets
1.scss
2.scss
index.html
app.js
node_modules
webpack.config.js
package.json
My webpack.config looks like this :
var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
app: ['./app.js'],
lib: ['./lib.js']
},
output: {
path: path.join(__dirname, '/mcdist/assets/js/'),
filename: 'app.js',
publicPath: "/public/js/"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'lib',
filename: 'lib.js',
minChunks: Infinity
}),
new webpack.NamedModulesPlugin()
],
devServer: {
proxy: [{
context: [
'/mcdist/api',
'/mcdist/appConfig',
'/mcdist/j_spring_security_logout'
],
target: 'http://localhost:8080',
secure: false
}],
port: 9000
}
};
module.exports = config
I run:
webpack-dev-server --inline
I create build folder 'mcdist' using npm command as :
"build:js": "uglifyjs mcdist/assets/js/app.js -m -o mcdist/assets/js/app.js",
My src/app.js looks like this :
require('./src/javascripts/ng-app/config/init-config.js');
require('./src/javascripts/ng-app/config/theme-config.js');
require('./src/javascripts/ng-app/components/dialog-message/dialog-message.service.js');
require('./src/javascripts/ng-app/components/footer/footer.controller.js');
require('./src/javascripts/ng-app/components/topbar/topbar.controller.js');
and many more files as list in require format in app.js
Now every time I make changes in HTML, JS files I need to create new build so changes get pushed to 'mcdist' folder (JS files gets concatenated and uglified in single app.js and all HTML files pushed to ng-app folder inside 'mcdist' folder.)
AND I've to RESTART WEBPACK dev server to see changes reflected.
This is very painful in local/development environment as changing small code needs build and restart, which is not the case with Grails application.
is there any way I can avoid restarting a server and just make changes to them hot-reloaded ? I've already tried running with --hot and --inline approaches but nothing had luck.
Help is most appreciated.
I'm new to React and I'm still trying to understand how things are put together. In webpack, I understand that we have to run the webpack command initially and it will generate the index.js file where we output it in the config. For my questions:
What role does this file play in runtime?
Everytime i do an npm start, does it automatically update my index.js file?
Here is my webpack.config:
var config = {
entry: './main.js',
output: {
path: __dirname,
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
With or without initially running webpack command my code still runs, reason for me being confused as to what it really does, because even without having the index.js in my directory I'm still able to run my code
Why we are using webpack:
When we run webpack command it will create a single index.js file in given the location.Our browser understands only vanilla html, css and javascript.But with react you are probably going to use jsx or es6. So we need to transform these to what browser understands.
According to your webpack.config , webpack is going to convert all jsx file into .js file (using bable loader)and bundle it to a single file as index.js.
Role plays by index.js:
You will be having an index.html file in your app directory.webpack automatically load index.js file to body of index.html file.This if final index.js file browser is going to use.
If you are using following configuration in package.json
{
"scripts": {
"dev": "webpack -d --watch",
"build" : "webpack -p"
},
}
then webpack keeps watching any changes in .jsx file and update index.js
As you are saying you code is running without webpack.It means you are using simple .js file.But to use es6 or .jsx you need webpack.
Hope it helps!. For more you can read https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/
So I was trying to set up the React/Babel/Webpack environment but I had some trouble doing so. I started creating a new folder, did the npm init and then I followed everything in this tutorial: https://facebook.github.io/react/docs/package-management.html
First, I've installed webpack globally
I've created a index.js with the same content on the tutorial
I've created a .babelrc file with { "presets": ["react"] }
Ran the npm install --save react react-dom babel-preset-react babel-loader babel-core
Then, when I run the command webpack main.js bundle.js --module-bind 'js=babel-loader' it gives me an error: "Module parse failed ~ You may need an appropriate loader to handle this file type.
Any idea guys? I've literally copy and pasted every step from the tutorial and I am sure all the files are correct. Thanks in advice!
Create file webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
};
Run
webpack
and it will generate bundle.js for you.
Now make sure you have added index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>
Looks like you accessing webpack from global. You might have installed webpack by doing
npm install -g webpack
Now,
Install webpack locally,
npm install webpack
and run.
./node_modules/webpack/bin/webpack.js main.js bundle.js --module-bind 'js=babel-loader'