Last active
March 10, 2021 05:58
-
-
Save ksrb/47f9124c2f5be13f39dc645405a12608 to your computer and use it in GitHub Desktop.
jquery.inputmask webpack configuration and package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title><%= htmlWebpackPlugin.options.title %></title> | |
| </head> | |
| <body> | |
| <input id="float"/> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'jquery.inputmask'; | |
| // Add extensions as necessary make sure you remember to add the corresponding aliases in the webpack config | |
| import 'inputmask.numeric.extensions'; | |
| import $ from 'jquery'; | |
| $(() => { | |
| $('#float').inputmask('99-99999'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "input-mask", | |
| "version": "1.0.0", | |
| "description": "Testing jquery.inputmask options", | |
| "repository": "input-mask", | |
| "main": "src/index.js", | |
| "scripts": { | |
| "start": "webpack-dev-server", | |
| "build": "webpack -p", | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "babel-core": "^6.0.0", | |
| "babel-loader": "^6.2.4", | |
| "babel-preset-es2015": "^6.9.0", | |
| "babel-preset-stage-0": "^6.5.0", | |
| "css-loader": "^0.23.1", | |
| "html-webpack-plugin": "^2.21.0", | |
| "postcss": "^5.0.21", | |
| "postcss-cssnext": "^2.6.0", | |
| "postcss-loader": "^0.9.1", | |
| "source-map-loader": "^0.1.5", | |
| "style-loader": "^0.13.1", | |
| "webpack": "^1.13.1", | |
| "webpack-dev-server": "^1.14.1" | |
| }, | |
| "dependencies": { | |
| "jquery": "^3.0.0", | |
| "jquery.inputmask": "^3.3.1" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| let webpack = require('webpack'); | |
| let HTMLWebpackPlugin = require('html-webpack-plugin'); | |
| let postcss_cssnext = require('postcss-cssnext'); | |
| let path = require('path'); | |
| function _path(p) { | |
| return path.join(__dirname, p); | |
| } | |
| module.exports = { | |
| entry: { | |
| app: './index.js', | |
| }, | |
| output: { | |
| filename: '[name].js', | |
| }, | |
| module: { | |
| preLoaders: [ | |
| { | |
| test: /\.js$/, | |
| loader:'source-map', | |
| }, | |
| ], | |
| loaders: [ | |
| { | |
| test: /\.js$/, | |
| loader: 'babel', | |
| exclude: /(node_modules)/, | |
| query: { | |
| presets: [ | |
| 'es2015', | |
| 'stage-0', | |
| ], | |
| passPerPreset: true, | |
| }, | |
| }, | |
| { | |
| test: /\.css$/, | |
| loader: 'style!css?importLoaders=1!postcss', | |
| }, | |
| ], | |
| }, | |
| postcss: [postcss_cssnext], | |
| resolve: { | |
| alias: { | |
| // jquery is NOT a peer dependency in jquery.inputmask so a alias | |
| // is used here to force jquery.inputmask to use your jquery | |
| // version | |
| 'jquery': _path('node_modules/jquery/dist/jquery'), | |
| // Switch dependency lib accordingly (this one uses jquery) | |
| 'inputmask.dependencyLib': _path('node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib'), | |
| // Core library (order of these aliases shouldn't matter FYI) | |
| 'inputmask' : _path('node_modules/jquery.inputmask/dist/inputmask/inputmask'), | |
| // Allows use of jquery input mask via jquery chaining api/$('selector').inputmask(...) | |
| 'jquery.inputmask': _path('node_modules/jquery.inputmask/dist/inputmask/jquery.inputmask'), | |
| // Add extensions following the pattern below remember to import them as necessary in your .js files | |
| 'inputmask.numeric.extensions': _path('node_modules/jquery.inputmask/dist/inputmask/inputmask.numeric.extensions'), | |
| }, | |
| }, | |
| plugins: [ | |
| new webpack.SourceMapDevToolPlugin( | |
| '[file].map', null, | |
| '[absolute-resource-path]', | |
| '[absolute-resource-path]' | |
| ), | |
| new HTMLWebpackPlugin({ | |
| title: 'Inputmask', | |
| template: 'index.ejs', | |
| filename: 'index.html', | |
| inject: 'head', | |
| chunks: 'app', | |
| }), | |
| ], | |
| bail: true, | |
| debug: true, | |
| devServer: { | |
| publicPath: '/', | |
| outputPath: _path('build'), | |
| stats: {colors: true}, | |
| host: '0.0.0.0', | |
| inline: true, | |
| port: '8090', | |
| quiet: false, | |
| noInfo: false, | |
| }, | |
| }; |
Added babel-core, thanks.
Looks like the last version doesn't have the .jquery at the end of inputmask.dependencyLib.
Changed thanks.
Thanks for sharing!
Awesome, thank you!!!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When creating those files from scratch,
npm startfails with the following message :To fix that, you need to edit
package.jsonand add"babel-core": "^6.0.0",in thedevDependencies.