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
Related
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.
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
My bundle size was around 2MB uncompressed and 400kb compressed
This bundle was created using webpack 1.15.0.
And the film strip is like this
This is the Webpackanalyzer output
Then i have updated webpack to 2.6.1 and enabled code spliting and moved all third party js to vendor.js, Now bundle.js was containing only my app's code.
My bundle size is like this
This is the uncompressed size.
But the load time increased to 7.09s
Then we tried chunking based on routes. using require.ensure. We thought the bundle which 1.75mb will be broken into small chunks based on routes. But each route's chunk was much bigger than expected. And the sum of the total routes chunk is more than the bundle.js size
Here is the final result after enabling route based chunking
As you can see bundle.js is reduced from 1.75MB to 180kb.
As I can see from WebpackBundle Analyzer , Each chunk has its node_modules inside each chunk. This node modules are same for all the chunks.
This is the comparision of two routes..
Is there any way to reduce the chunk size of each route ?
I am using CommonChunkPlugin.
new CommonsChunkPlugin({
name: 'common',
filename: 'commons-[hash:8].js',
chunks: ['vendor'],
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'meta', chunks: ['vendor'], filename: 'meta.[hash].js' }),
Looks like what you need is CommonsChunkPlugin
https://webpack.js.org/plugins/commons-chunk-plugin/#components/sidebar/sidebar.jsx
As #user1471177 mentioned. I have add one more CommonChunkPlugin which makes common code of all the route's chunks in to one common chunk.
new CommonsChunkPlugin({
name: 'common',
filename: 'commons-[hash:8].js',
chunks: ['vendor'],
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'meta', chunks: ['vendor'], filename: 'meta.[hash].js' }),
new webpack.optimize.CommonsChunkPlugin({ name: 'common', chunks: ['0','1','2',.......'30'], filename: 'common.[hash].js' , minChunks: 2}),
Which seperated all the common code in to one common.js chunk.
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')]}]));