Skip to content

Instantly share code, notes, and snippets.

@ksrb

ksrb/index.ejs

Last active March 10, 2021 05:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ksrb/47f9124c2f5be13f39dc645405a12608 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ksrb/47f9124c2f5be13f39dc645405a12608 to your computer and use it in GitHub Desktop.
Download ZIP
jquery.inputmask webpack configuration and package.json
Raw
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<input id="float"/>
</body>
</html>
Raw
index.js
import 'jquery.inputmask';
import $ from 'jquery';
$(() => {
$(document.getElementById('float')).inputmask('99-99999');
});
Raw
package.json
{
"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-eslint": "^6.1.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"
}
}
Raw
webpack.config.js
/* eslint-disable */
'use strict';
/* eslint-enable */
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'),
'inputmask.dependencyLib': _path('node_modules/jquery.inputmask/dist/inputmask/inputmask.dependencyLib.jquery'),
'inputmask' : _path('node_modules/jquery.inputmask/dist/inputmask/inputmask'),
// Allows use of jquery input mask via jquery chaining api/$.inputmask
'jquery.inputmask': _path('node_modules/jquery.inputmask/dist/inputmask/jquery.inputmask'),
},
},
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
Copy link
Copy Markdown
Author

ksrb commented Jun 28, 2016 •
edited
Loading

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
Copy link
Copy Markdown

AlexandreBonneau commented Oct 27, 2016 •
edited
Loading

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
Copy link
Copy Markdown
Author

ksrb commented Nov 29, 2016 •
edited
Loading

Added babel-core, thanks.

@glrodasz
Copy link
Copy Markdown

glrodasz commented Jan 26, 2017

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

@ksrb
Copy link
Copy Markdown
Author

ksrb commented Feb 6, 2017

Changed thanks.

@GustavoHekel
Copy link
Copy Markdown

GustavoHekel commented Feb 16, 2017

Thanks for sharing!

@adyz
Copy link
Copy Markdown

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