Configuring Webpack
There are some cases when you might want to add some extra configuration for your app. You can change the default Webpack configuration and get the expected result.
Let's look at an example of configuring Webix Jet to work with the Apache Tomcat server.
Prerequisites:
- 1.There is a Java app on your Tomcat server, configured to your needs.
- 2.
You need to let the Webix Jet app access the Java app. Set the proxy path in webpack.config.js. Replace this:
webpack.config.js
devServer:{
stats:"errors-only"
}
with this:
webpack.config.js
devServer:{
stats:"errors-only",
proxy: {
"/server":{
target: 'http://localhost:9200',
pathRewrite: {"^/server" : ""}
}
}
}
This configuration will make it possible to set the path to the server as:
models/mydata.js
export const mydata = new webix.DataCollection({
url:"/server/mydata"
})
Both servers can be run separately and at the same time. The Webix Jet app will be able to communicate with the server-side code as they both are run by the same server.
By default, the app is built with one start file (admin.js in this example):
webpack.config.js
...
const config = {
entry: "./sources/admin.js",
output: {
//...
filename: "admin.js"
},
...
}
...
To create multiple entry files, pass an object to entry in config. For output filenames, use the [name] substitution to ensure that each file has a unique name:
webpack.config.js
{
entry: {
admin: "./sources/admin.js",
orders: "./sources/orders.js"
},
output: {
//...
filename: "[name].js"
}
}
If you do not want to localize the app and do not want to create an empty locales folder, you can change the Webpack config.
By default, Webpack tries to resolve the locales in sources/locales. Delete the
jet-locales
alias:webpack.config.js
const config = {
...
resolve: {
extensions: [".js"],
modules: ["./sources", "node_modules"],
alias:{
"jet-views":path.resolve(__dirname, "sources/views"),
"jet-locales":path.resolve(__dirname, "sources/locales") // !
}
},
...
}
webpack.config.js
...
plugins: [
new MiniCssExtractPlugin({
filename:"[name].css"
}),
new webpack.DefinePlugin({
VERSION: `"${pack.version}"`,
APPNAME: `"${pack.name}"`,
PRODUCTION : production,
BUILD_AS_MODULE : (asmodule || standalone)
}),
new webpack.IgnorePlugin(/jet-locales/) // !
]
Now the app will be compiled without the locales.
By default, views and locales are stores in sources/views and sources/locales correspondingly. If you want your app structure to be different, you can change the paths to views and locales in the Webpack config file:
webpack.config.js
const config = {
...
resolve: {
extensions: [".js"],
modules: ["./sources", "node_modules"],
alias:{
"jet-views":path.resolve(__dirname, "sources/components"), // !
"jet-locales":path.resolve(__dirname, "sources/languages") // !
}
},
...
}
Last modified 2yr ago