Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
cordova-plugin-webpack
Advanced tools
Changelog
Readme
Module bundlers such as webpack are essential for SPA (Single Page Application) development. Unfortunately, the Cordova workflow does not integrate webpack as a standard feature.
Simply install this plugin to easily integrate webpack into your Cordova workflow.
$ npm install -D webpack@4 webpack-cli@3 webpack-dev-server@3
$ cordova plugin add cordova-plugin-webpack
$ cordova { prepare | platform add | build | run } [<platform> [...]]
[-- [--webpack.<option> <value> | --livereload]]
Option | Description | Default | Aliases |
---|---|---|---|
--webpack.<option> | Passed to webpack-cli options or webpack-dev-server options. eg: --webpack.config example.config.js Note: Some options such as Stats Options and Watch Options are not yet supported. | -w | |
--livereload | Enables LiveReload (HMR) | false | -l |
Before preparing your Cordova app, build scripts by webpack.
$ cordova prepare
$ cordova build -- --webpack.config path/to/dir/webpack.config.js
$ cordova build android -- --webpack.mode=production
$ cordova build ios -- --webpack.env.prod
After preparing your Cordova app, run LiveReload by Webpack Dev Server.
$ cordova prepare -- --livereload
$ cordova run ios -- -w.config path/to/dir/webpack.config.babel.js -l
$ cordova run android -- --livereload --webpack.port=8888 --webpack.watch-content-base=false
Create a webpack configuration file (webpack.config.js
) in your project root folder
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'index.bundle.js',
},
devtool: 'inline-source-map',
};
Execute the commands
$ cordova build
$ cordova run -- --livereload
Create a Cordova app
$ cordova create cordova-plugin-webpack-example cordova.plugin.webpack.example CordovaPluginWebpackExample
Add platforms
$ cd cordova-plugin-webpack-example
$ cordova platform add android ios
Create a JavaScript file (entry point)
$ mkdir src
$ mv www/js/index.js src/index.js
Create a webpack configuration file (webpack.config.js
) in your project root folder
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'index.bundle.js',
},
devtool: 'inline-source-map',
};
Fix a HTML file (www/index.html
)
- <script type="text/javascript" src="js/index.js"></script>
+ <script type="text/javascript" src="index.bundle.js"></script>
Execute the commands
$ cordova build
$ cordova run -- --livereload
NOTE
Starting with Android 9 (API level 28), cleartext support is disabled by default. Therefore, LiveReload does not work on Android 9.0 and higher devices and emulators. Also see this issue.
To resolve this, you must modify your config.xml
file to enable cleartext support.
Add xmlns:android="http://schemas.android.com/apk/res/android"
in widget
root element
<widget id="cordova.plugin.webpack.example" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
Enable android:usesCleartextTraffic
attribute in application
element
<platform name="android">
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
</platform>
Basically, it works according to your webpack configuration file.
If you want to custom webpack configuration, modify your webpack.config.js
file.
...
module.exports = {
...
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin(),
],
...
devServer: {
contentBase: path.join(__dirname, 'public'),
host: 'localhost',
port: '8000',
hot: false,
},
...
};
Option | Default |
---|---|
devServer.contentBase | www |
devServer.historyApiFallBack | true |
devServer.host | 0.0.0.0 |
devServer.port | 8080 |
devServer.watchContentBase | true |
devServer.hot | true |
For example, if you want page reloading (LiveReload) instead of hot module reloading (HMR), specify the devServer.hot
option as false
.
...
module.exports = {
...
devServer: {
hot: false,
},
...
};
Contributions are always welcome! Please read the contributing first.
Thanks goes to these wonderful people (emoji key):
Kotaro Sugawara 💻 📖 🤔 🚇 ⚠️ | Jimmy Multani 📖 💻 | shotaabe 📖 🎨 | Gavin Henderson 🐛 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Cordova Webpack Plugin
The npm package cordova-plugin-webpack receives a total of 97 weekly downloads. As such, cordova-plugin-webpack popularity was classified as not popular.
We found that cordova-plugin-webpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.