I am new to react, redux and webpack and I have several problems. I started with "simpe-redux-boilerplate". My project structure is:
--src
--containers
--index.js
--...
--php
--vendor
--janguage.json
First, I need to use janguage.json from my App.js in container directory without bundling, so I am not importing it but fetching
fetch('language.json')...
I am able to import it with path './../../language.json', but for fetching this path is not working. Which is the right path?
Second, I am using php for server requests (php and other directories). Unfortunately, these directories are not included in my build. How to add them? Move to src directory doesn't work.
My webpack prod configuration:
entry: [
'./src/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},...
Thank you.
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'
}};
Before setting up any lazy-loaded React components, this app had an overly large, unsplit main bundle.
In order to ensure clients get updated app code, the webpack config has:
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'public', 'index.html'),
hash: true,
}),
...
That causes the build's index.html to have e.g.
<script src="/main.bundle.js?3c6c1a14d95b24dd19cc">
where the hash in the query is generated randomly at build time.
Then adding React lazy-loading, the bundle is split for those components, which by itself is good.
But I keep getting cached versions of those split components rather than the latest version, and I wonder how to cache bust the application splits.
I found changing the webpack config's output.filename to include [contenthash] causes all the bundle split js files to have a hash code, then the HtmlWebpackPlugin doesn't need the hash option.
output: {
filename: '[name].[contenthash].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
According to webpack doc, The contenthash substitution will add a unique hash based on the content of an asset. When the asset's content changes, contenthash will change as well.
In our project we are using webpack-dev-server to run our development environment.
We are currently transforming the project into a progressive-web-app using workbox.
When we run webpack with NODE_ENV=production everything is working fine, as it first compiles the files, and then the workbox plugin picks them up and adds them to the service-worker.
When we run webpack-dev-server hot, the build fails when running the workbox plugin as it cannot find any files in the dist folder.
The problem seems to be that workbox is not picking up the js and css files that are generated in-memory and seems to need the files on the file system.
module.exports = {
context: path.resolve(__dirname, 'front'),
entry: [
...preEntries,
'./react/app.js'
],
output: {
path: path.resolve(__dirname, 'front-dist'),
filename: `react/app.${git.gitCommitAbbrev}.js`,
chunkFilename: `react/[id].app.${git.gitCommitAbbrev}.js`,
publicPath: '/glass/'
},
devtool: isProdEnv ? false : 'eval-source-map',
stats: {
chunkModules: false
},
module: {
...
},
plugins: [
new WorkboxPlugin({
globDirectory: path.resolve(__dirname, 'front-dist'),
globPatterns: ['**/*.{html,js,css,woff2}'],
swDest: path.join(path.resolve(__dirname, 'front-dist/sw/'), 'service-worker.js'),
handleFetch: true,
clientsClaim: true,
skipWaiting: true,
})
]
}
Any idea's as to how this should be working
Recent releases of workbox-webpack-plugin have support for in-memory filesystems, with coverage in its test suite.
If you're still having troubles with the current release of Workbox, please open an issue on the issue tracker and we can investigate further.
That being said, using a cache-first service worker inside of a hot-reload, local development environment is a puzzling choice, as caching defeats the purpose of seeing updates right away.
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
})
]
};