when I use cra create a react app and npm run start, I see the dom tree like beblow
but for some special reason I hope it should be like
does anybody know how to change the webpackDevServer.config.js to achieve my goal?
change publicPath doesn't work o(╥﹏╥)o
Have you tried already to modify the base-href value in your index.html?
<base href="./">
With this, it will take the files from whatever server or directory you run your app from.
Also, if you need it set to that always, you could try:
<base href="http://localhost:3000/">
You could achieve that by using output property in your webpack.config.js file.
You can do something like this,
const BUILD_DIR = path.resolve(__dirname, 'point_to_static_folder')
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath: "http://localhost:3000/static/",
}
For your other files you can define rules to have those files as well.
Related
I'm looking for a solution to replace all my relative imports "../../../" to alias paths I set in the webpack.config.js instead of manually replacing the strings.
I'm working in a React JS project that is large enough that I feel there must be a way to automatically resolve all relative paths to alias paths in all modules and files.
Appreciate your help if you have any experience with this scenario.
My webpack config is already setup with this:
resolve: {
alias: {
js: path.resolve(__dirname, 'js'),
css: path.resolve(__dirname, 'css')
}
},
I want to create two different builds for a single application. When I do an npm run build, it runs webpack and generates a build, and injects that build into the index.html file. What I ideally want to do is tell webpack to create one build from index.js and another build from index2.js. How do I achieve this? Looked into module federation, but wasn't able to figure out how to do this in a single application.
You can do this settings in webpack.config.js.
module.exports = {
entry: {
bundle1: "path for index1.js",
bundle2: "path for index2.js"
},
output: {
// `filename` provides a template for naming your bundles (remember to use `[name]`)
filename: '[name].js'
publicPath: 'Path for saving directory'
}};
I am facing one issue where my react app is not able to load the lazily loaded chunk(Error: loading chunk 0 failed). Upon checking, I found the chunk is being requested from the relative url that is localhost.com:8000/chunk.js, instead of requesting it from the actual path that is set in the webpack config. My webpack config looks like below:
{
...
output: {
filename: '[name].client.bundle.js',
chunkFilename: 'chunk.js',
path: path.resolve(__dirname, '..', '.build', 'js'),
},
...
}
The other file that is bundle.js loads correctly from localhost.com:8000/build/js/bundle.js. It's just the problem with this chunk that it's not loading from the builds directory. I would really appreciate any help on this. Thanks a ton in advance :)
I just needed to set publicUrl in the output config and point it to /js. It works now! :)
I'm in the nightmare process of updating one of my older projects from Webpack 3 to 4 and it's introducing a whole chain of things that need fixing. The most annoying one thus far is definitely switching from webpack-dev-server to webpack-serve due to it's lack of an actual example. So with that in mind, how the heck do I use it?
Using Webpack 4.14.0 and Webpack-Serve 1.0.4.
My webpack.config.js had the following options for webpack-dev-server:
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist/'
}
I don't see options for history or public paths just yet, so I suppose I only need the content config option.
So according to the docs I'm supposed to do:
serve({
content: path.join(__dirname, 'public')
});
But where do I put this? The Github README claims that the most commonly used is to put it webpack.config.js but that seems false because the example also does this:
const serve = require('webpack-serve');
const config = require('./webpack.config.js');
serve({ config });
Do I really import a config file into itself?
I'd appreciate an example. Thanks.
I answered in another question very similar on "how to set up webpack-serve".
For simplicity, I also uploaded the full example to Github
i am new to webpack, i have configured webpack to a working condition where my index.html file and budle.js file comes to /dist folder. iam aware that i can build css files too but for now i want to build js and run the app. please check the attached images for better understanding of the directory structure and the webpack build configuration.
My doubt is that if i run app from dist folder i would lose all the path of angular templates and image paths etc. how can i overcome this situation? any help is appreciated.
First of all, you need to know that the goal is to have a fully runnable stand alone application inside ./dist/ after build. All sourcefiles which are needed to run your application should be placed there. In that way you will be able to distribute your application by copy/upload/or-what-ever based on your ./dist/ directory. All other directories in your project are just for development. Those will be not a part of your distribution package.
Wrong approach: Trying to change the include path's in your application.
You need to copy or concat your sourcefiles (static files) into your distribution folder. I realy don't know why your views/templates are not stored in ./app/assets/ and not in ./app/views/ because ./app/views/ should be the correct path to store your views. Well, you need to copy your static sourcefiles. For example: You could use copy-webpack-plugin.
Your webpack config could look like this in the end:
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
context: path.join(__dirname, 'app'),
devServer: {
// This is required for older versions of webpack-dev-server
// if you use absolute 'to' paths. The path should be an
// absolute path to your build destination.
outputPath: path.join(__dirname, 'dist')
},
plugins: [
new CopyWebpackPlugin([
{
from: 'assets/**/*',
to: 'assets/'
},
{
from: 'views/**/*',
to: 'views/'
},
], {
ignore: [
],
// By default, we only copy modified files during
// a watch or webpack-dev-server build. Setting this
// to `true` copies all files.
copyUnmodified: true
})
]
};