Skip to content

Instantly share code, notes, and snippets.

@garryyao
Last active April 8, 2016 15:04
Show Gist options
  • Select an option

  • Save garryyao/f49dd408abde01cfd6776e7189284f3f to your computer and use it in GitHub Desktop.

Select an option

Save garryyao/f49dd408abde01cfd6776e7189284f3f to your computer and use it in GitHub Desktop.
{
"presets": ["es2015"]
}
node_modules
bower_components
*.map
body {
overflow-y: auto; }
<!-- your html here--><main></main>
// your html here
main
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(2);
__webpack_require__(3);
/***/ },
/* 2 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ },
/* 3 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }
/******/ ]);
import './fiddle.scss';
import './fiddle.jade';
// your js here
// your css here
body {
overflow-y: auto;
}
<!DOCTYPE html><html><head><title></title><link href="/fiddle.css" rel="stylesheet"><script src="/fiddle.js"></script></head><body><!-- your html here--><main></main></body></html>
doctype html
html
head
title
body
include ./fiddle
{
"name": "",
"main": "index.html",
"scripts": {
"serve": "node_modules/.bin/webpack-dev-server --inline --hot",
"build": "node_modules/.bin/webpack",
"watch": "node_modules/.bin/webpack --watch",
"publish": "npm run build && fiddle publish",
"jsfiddle": "npm run build && git add -A && git commit -m 'bump' && git push origin -f master && fiddle run"
},
"dependencies": {},
"devDependencies": {
"babel-loader": "",
"babel-preset-es2015": "",
"jade-html-loader": "",
"jade": "",
"sass-loader": "",
"node-sass": "",
"webpack": "",
"webpack-dev-server": "",
"css-loader": "",
"html-loader": "",
"extract-text-webpack-plugin": "",
"html-webpack-plugin": ""
}
}
'use strict';
const lib_excludes = /(node_modules|bower_components)/;
const fs = require('fs');
const path = require('path');
function check_ext() {
return Array.from(arguments).find(function (ext) {
try {
fs.accessSync('./fiddle.' + ext, fs.R_OK | fs.W_OK);
return 1;
} catch (e) {
return 0;
}
});
}
const ts_ext = check_ext('ts', 'tsx');
const jsx_ext = check_ext('jsx');
const coffee_ext = check_ext('coffee');
const js_ext = ts_ext || jsx_ext || coffee_ext || 'js';
const script_loader = ts_ext ? 'ts-loader' : jsx_ext ? 'babel' : coffee_ext ? 'coffee-loader' : 'script-loader';
const sass_ext = check_ext('sass', 'scss');
const less_ext = check_ext('less');
const css_ext = sass_ext || less_ext || 'css';
const style_loader = 'css' + (sass_ext ? '!sass' : less_ext ? '!less' : '');
const jade_ext = check_ext('jade');
const markdown_ext = check_ext('md');
const html_ext = jade_ext || markdown_ext || 'html';
const markup_loader = 'html' + (jade_ext ? '!jade-html-loader' : markdown_ext ? '!markdown' : '');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const css_extract = new ExtractTextPlugin("[name].css", {allChunks: true});
const html_extract = new ExtractTextPlugin("[name].html", {allChunks: true});
module.exports = {
entry: {
fiddle: ['./fiddle.' + js_ext]
},
output: {
path: path.resolve(__dirname, '.'),
publicPath: '/',
filename: '[name].js'
},
module: {
loaders: [{
test: new RegExp('\\.' + js_ext + '$'),
exclude: lib_excludes,
loader: script_loader
}, {
test: new RegExp('\\.' + css_ext + '$'),
exclude: lib_excludes,
loader: css_extract.extract(style_loader)
}, {
test: new RegExp('\\.' + html_ext + '$'),
exclude: /index\.*/,
loader: html_extract.extract(markup_loader)
}]
},
plugins: [
css_extract,
html_extract,
new HtmlWebpackPlugin({
template: 'html!jade-html-loader!./index.jade',
inject: 'head',
cache: true
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment