Skip to content

Instantly share code, notes, and snippets.

@ksrb ksrb/index.ejs
Last active Jul 8, 2018

Embed
What would you like to do?
jquery.inputmask webpack configuration and package.json
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<input id="float"/>
</body>
</html>
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');
});
{
"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"
}
}
'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,
},
};
@ksrb

This comment has been minimized.

Copy link
Owner Author

ksrb commented Jun 28, 2016

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 start

Go 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:

  1. babel
  2. postcss
  3. source mapping
@AlexandreBonneau

This comment has been minimized.

Copy link

AlexandreBonneau commented Oct 27, 2016

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.

@ksrb

This comment has been minimized.

Copy link
Owner Author

ksrb commented Nov 29, 2016

Added babel-core, thanks.

@glrodasz

This comment has been minimized.

Copy link

glrodasz commented Jan 26, 2017

Looks like the last version doesn't have the .jquery at the end of inputmask.dependencyLib.

@ksrb

This comment has been minimized.

Copy link
Owner Author

ksrb commented Feb 6, 2017

Changed thanks.

@GustavoHekel

This comment has been minimized.

Copy link

GustavoHekel commented Feb 16, 2017

Thanks for sharing!

@adyz

This comment has been minimized.

Copy link

adyz commented Apr 7, 2017

Awesome, thank you!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.