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
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.
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 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'm having trouble getting a quite basic setup with webpack and babel working. I need babel to compile JSX, i don't use ES2015 features.
There are quite a few questions here on SO about this exact problem, but they all seem to be resolved by installing babel-preset-react or adding the preset option to babel in webpack.config.js all of which i have done already (I think).
I'm sure it's a simple thing I'm missing, but I just can't see it.
I extracted just the files needed to demonstrate my problem into this gist (i used dashes in the filenames to indicate subfolders since you can't have folders in gists). My webpack.config.js looks like this:
module.exports = {
entry: [
'./app/js/app.js'
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: __dirname + '/app/js/',
loader: 'babel-loader?presets[]=react',
}
]
},
output: {
filename: "bundle.js",
path: __dirname + '/public'
},
};
Note: in package.json everything is listed under 'dependencies', since i'm hosting this on heroku which does not install devdependencies (at least not by default)
For what it is worth, I am currently using webpack with latest babel with the following config line
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
Since you don't use es2015, you should be able to just leave the react preset in the list. Maybe babel-loader?presets[]=react is not working the way you expect it to.
I banged my head against this for a long time as well. It turned out that the include wasn't finding my directories. The easiest way to fix, as pointed out in the comment to the marked answer above, is to use an exclude, e.g. exclude: /node_modules/, or whatever you need to exclude, and it'll start working.
If you're new to webpack, you'll find the error you get from the above kind of cryptic (will look like a parse error on your js, even though you thought babel should have transformed the JSX; the deal is that it didn't).
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')]}]));