Skip to content

Instantly share code, notes, and snippets.

@ksrb
Last active March 10, 2021 05:58
Show Gist options
  • Save ksrb/47f9124c2f5be13f39dc645405a12608 to your computer and use it in GitHub Desktop.
Save ksrb/47f9124c2f5be13f39dc645405a12608 to your computer and use it in GitHub Desktop.
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,
},
};
@adyz
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