I am building wordpress plugin with react. I have added code splitting feature and worked perfectly.
Current case (1) with domain name : http://site_name (project configured on nginx)
Another case (2) with domain name: http://localhost:8888/site_name (project inside htdocs folder, apache)
For case 1:
module.exports = {
context: __dirname,
devtool: devMode ? 'inline-sourcemap' : false,
mode: devMode ? 'development' : 'production',
entry: {
builder: ['./src/form_builder/index.js'],
orders: './src/membership/orders.js', //ok
},
output: {
path: __dirname + '/dist/',
filename: '[name].build.js',
publicPath: `/wp-content/plugins/${plugin_name}/assets/js/dist/`
},
}
I have enqueued build js file builder.build.js and orders.build.js on wp-admin and other all split file also located in http://site_name/wp-content/plugins/plugin_name/assets/js/dist/ and these splitted file loaded on demand as expected.
For case 2 Problem : Issue seen when i tried to run same project on domain http://localhost:8888/site_name. Two build js builder.build.js and orders.build.js are loaded as expected but error occured for path location for splitted js file(i.e. 0.build.js, 1.build.js, *.build.js).
As i know already that path is being different as domain name is changed, is there way
As a quick fix i can do publicPath: ../wp-content/plugins/${plugin_name}/assets/js/dist/ to sort issue for http://localhost:8888/site_name but would create issue for http://site_name again.
Have anyone face the same issue, a little help would be really appreciated.
Thanks in advance.
Related
I put all my images in a folder at the root of my project and I'm using them in the code that I write.
Howether there seems to be an error (ex : Cannot find module '../../../assets/Structure.png' or its corresponding type declarations because of:
import structure from "../../../assets/Structure.png";
). It still work when I do my yarn start but it seems to be a potential issue. Any idea of how to make it work without error? The issue seems to be with the '../'.
My project is like this :
src --> pages --> page1 --> index.tsx
assets --> image.png
The best practice is to create aliases to your folders which can be easily imported without any hassle.
Open babel.config.js situated in the root folder and add the following lines of settings
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
"module-resolver",
{
root: ["./src"],
extensions: ['.js', '.jsx', '.json', '.svg', '.png', '.jpg','.tsx','.ts'],
alias: {
"assets":"./src/assets"
}
}
]
]
};
Now you can easily import any assets like
assets/Structure.png without using ../../../ it will make your life easier..
You should similarly set up aliases for other common folders.
Make sure to completely re-run the application..
Cheers.
In my webpack.config I have a cache prop. Does this make sure chunks are not regenerated anytime? I want to generate chunks from scratch every time.
Cache invalidation can be achieved by including a hash to the
filenames.
Assume you have the following configuration:
{
output: {
...
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
},
},
Webpack would generate filenames like these based on it:
main.d587bbd6e38337f5accd.js
vendor.dc746a5db4ed650296e1.js
Learn more about webpack caching:
https://webpack.js.org/guides/caching
I want to config webpack for give me the file version when I open the sources in inspect like this:
You can't have versions, but you can have [contenthash]on your filename that works almost the same as a version, but it is a hash generated based on the file content.
To do that:
output: {
filename: 'bundle.[contenthash].js'
}
I changed my webpack.config.js output config like this:
output: {
path: paths.build,
chunkFilename: `[name].${process.env.RELEASE_ID}.[chunkhash:8].js`,
filename: `[name].${process.env.RELEASE_ID}.[chunkhash:8].js`,
publicPath: '/static/',
},
and it fixed :D
I added a config.json to application.
in webpack.config.js I defined Config
externals: {
'Config': JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
},
in application I required config and used it
var Config = require('Config');
However, webpack bundles my config file into index.js(my webpack output file) and I dont want this.
I want to keep my config.json seperate from index.js To achieve this, I excluded my config.json but it did not work.
exclude: [/node_modules/, path.resolve(__dirname, 'config.dev.json'), path.resolve(__dirname, 'config.prod.json')]
Can you please help me if I miss something.
Thanks
As descibed by #thedude you can use webpack's code splitting feature.
Instead of simply doing import config from 'config.json' you can use a really cool feature of code splitting.
require.ensure([], function(require) {
let _config = require("config.json");
this.setState({
_configData: _config
});
});
and when you want to use data of config, do that by checking state
if(this.state._configData) { // this checks _configData is not undefined as well
// use the data of config json
}
When you will compile your code using webpack then two bundle files will be created i.e. bundle.js and 0.bundle.js. This 0.bundle.js has your code of config.json file.
You should use webpack's code splitting feature: https://webpack.js.org/guides/code-splitting/#src/components/Sidebar/Sidebar.jsx
I want to create two webpack chunks: app.js and vendor.js
Currently I have smth like:
entry = {
psw: DIR.src,
vendor: ["angular", "angular-ui-router", "angular-bootstrap"]
};
...
plugins.push(new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'))
(i.e. like here https://github.com/christianalfoni/react-webpack-cookbook/wiki/Split-app-and-vendors)
This works fine (At least it works and looks ok). However I want to generate that 'vendor' array automatically. Any ideas how that can be done?
Got it using SplitByPath plugin. It puts to separate bundle js as well as css, so its very nice to use. Dont know why it is referenced so rare.
config.plugins.push(new SplitByPathPlugin([{ name : 'vendor', path: [path.join(__dirname, 'node_modules'), path.join(__dirname, 'bower_components')]}]));