Begin to convert script.js to webpack

.gitignore

@@ -2,4 +2,4 @@ _output
 _site
 .jekyll-metadata
 /node_modules
-/assets/webpack
+/assets/packed

_config.yml

@@ -21,6 +21,7 @@ exclude:
   - yarn.lock
   - package-lock.json
   - webpack.config.js
+  - node_modules
 
 # Markdown
 

_includes/2017/head.html

@@ -4,17 +4,20 @@
   {% include meta.html %}
   {% include polyfills.html %}
 
+  <!-- script -->
+  <script src='{{base}}/assets/packed/app.js?t={{ timestamp }}'></script>
+
   <!-- 3rd-party libs -->
-  <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
+  <!-- <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script> -->
   <script src='https://cdn.jsdelivr.net/npm/isotope-layout@3.0.4/dist/isotope.pkgd.min.js'></script>
-  <script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0'></script>
+  <!-- <script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0'></script> -->
   {% for lang in page.prism_languages %}
   <script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}
   <script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
 
   <!-- 3rd-party CSS -->
-  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sanitize.css@5.0.0/sanitize.css'>
+  <!-- <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sanitize.css@5.0.0/sanitize.css'> -->
-  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'>
+  <!-- <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'> -->
 
   {% comment %}
   <!-- No custom fonts -->

_js/app.js

@@ -1 +1,10 @@
-alert('hello')
+// 3rd party libs
+window.jQuery = window.$ = require('jquery')
+window.Prism = require('prismjs')
+
+// CSS
+require('sanitize.css')
+require('prismjs/plugins/line-highlight/prism-line-highlight.css')
+
+function requireAll (r) { r.keys().forEach(r) }
+requireAll(require.context('./behaviors/', true, /\.js$/))

_js/behaviors/no-preview.js

@@ -0,0 +1,11 @@
+import $ from 'jquery'
+
+/*
+ * Behavior: [data-js-no-preview]
+ */
+
+$(function () {
+  if (~window.location.search.indexOf('preview=1')) {
+    $('[data-js-no-preview]').remove()
+  }
+})

_support/webpack.config.js

@@ -6,17 +6,27 @@ module.exports = {
     app: './_js/app.js'
   },
   output: {
-    path: join(__dirname, '..', 'assets', 'webpack'),
+    path: join(__dirname, '..', 'assets', 'packed'),
     filename: '[name].js'
   },
   module: {
     rules: [
-      { test: /\.js$/,
+      {
+        test: /\.js$/,
         exclude: /node_modules/,
         use: [
           { loader: 'babel-loader' }
         ]
       }
+    ],
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' }
+        ]
+      }
     ]
   },
   stats: 'minimal'

assets/2017/script.js

@@ -1,13 +1,3 @@
-/*
- * Behavior: preview=1
- */
-
-$(function () {
-  if (~window.location.search.indexOf('preview=1')) {
-    $('[data-js-no-preview]').remove()
-  }
-})
-
 /*
  * Behavior: Wrapping
  */

package.json

@@ -9,6 +9,8 @@
     "babel-core": "6.26.0",
     "babel-loader": "7.1.2",
     "babel-preset-env": "1.6.0",
+    "css-loader": "0.28.7",
+    "style-loader": "0.18.2",
     "webpack": "3.6.0"
   },
   "babel": {
@@ -17,6 +19,13 @@
     ]
   },
   "scripts": {
-    "dev": "webpack --watch --progress --colors"
+    "dev": "webpack --watch --progress --colors",
+    "prepublish": "webpack"
+  },
+  "dependencies": {
+    "isotope-layout": "3.0.4",
+    "jquery": "3.2.1",
+    "prismjs": "1.8.1",
+    "sanitize.css": "5.0.0"
   }
 }