Skip to content

Instantly share code, notes, and snippets.

@artoodetoo

artoodetoo/app.js

Last active January 20, 2019 10:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artoodetoo/724951e44af0f55757258501c3eef42f to your computer and use it in GitHub Desktop.
Save artoodetoo/724951e44af0f55757258501c3eef42f to your computer and use it in GitHub Desktop.
Download ZIP
Example webpack config to concat jQuery plugins but use external jQuery instance
Raw
app.js
window.moment = require('moment');
require('daterangepicker');
require('bootstrap-select');
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>-->
<script src="dist/app.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<style>
.calendar-table th, .calendar-table td { padding: 0 !important; }
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Javascript example</h1>
<p class="lead">Test Date Range Picker and Bootstrap Select controls.</p>
</div>
<form method="get">
<div class="row">
<div class="col-md-4">
<input class="form-control" type="text" id="daterange" name="daterange" value="" />
</div>
<div class="col-md-4"><select id="choice" name="choice[]" class="selectpicker form-control" multiple>
<optgroup label="Condiments">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Breads">
<option>Plain</option>
<option>Steamed</option>
<option>Toasted</option>
</optgroup>
</select></div>
<div class="col-md-4"><button type="submit" class="btn btn-default">Submit</button></div>
</div>
</form>
</div>
<script>
$(document).ready(function() {
$('#daterange').daterangepicker();
$('#choice').selectpicker();
});
</script>
</body>
</html>
Raw
package.json
{
"name": "concat-without-jquery",
"private": true,
"version": "0.0.1",
"scripts": {
"dev": "node_modules/webpack/bin/webpack.js --mode=development --config=webpack.config.js",
"prod": "node_modules/webpack/bin/webpack.js --mode=production --config=webpack.config.js"
},
"dependencies": {},
"devDependencies": {
"bootstrap-select": "~1.12.4",
"daterangepicker": "^3.0.3",
"moment": "2.23.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
}
}
Raw
webpack.config.js
//const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: './src/app.js' // , ...
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
sourceMapFilename: '[name].js.map'
},
// devtool: 'source-map',
performance: {
// hints: process.env.NODE_ENV === 'production' ? 'warning' : false
hints: false
},
externals: {
jquery: 'jQuery'
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment