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, | |
| }, | |
| }; |
When creating those files from scratch, npm start fails with the following message :
» npm start
> input-mask@1.0.0 start /home/user/dev/webpack/inputmask
> webpack-dev-server
http://0.0.0.0:8090/
webpack result is served from /
content is served from /home/user/dev/webpack/inputmask
/home/user/dev/webpack/inputmask/node_modules/webpack-dev-middleware/middleware.js:147
if(err) throw err;
^
Error: Cannot find module 'babel-core'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (/home/user/dev/webpack/inputmask/node_modules/babel-loader/index.js:4:13)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at DependenciesBlock.loadPitch (/home/user/dev/webpack/inputmask/node_modules/webpack-core/lib/NormalModuleMixin.js:193:17)
at DependenciesBlock.doBuild (/home/user/dev/webpack/inputmask/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
at DependenciesBlock.build (/home/user/dev/webpack/inputmask/node_modules/webpack/lib/NormalModule.js:84:14)
at Compilation.buildModule (/home/user/dev/webpack/inputmask/node_modules/webpack/lib/Compilation.js:126:9)
at /home/user/dev/webpack/inputmask/node_modules/webpack/lib/Compilation.js:309:10
To fix that, you need to edit package.json and add "babel-core": "^6.0.0", in the devDependencies.
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
This gist is meant to help people build jquery.inputmask with webpack see this issue.
Copy the files to a directory
In terminal:
npm install && npm startGo to localhost:8090
You should see single input with mask 99-99999
Some extra goodies that can be removed if they aren't necessary for your project namely: