<commit_before>---
layout: post
tilte: webpack for jekyll
---

# why
- because you can build github page site with webpack, jade and stylus, so nice.

# before start
- you should know [webpack](https://webpack.github.io/)
- you should know [jade](http://jade-lang.com/)
- you should know [stylus](http://stylus-lang.com/)

# workflow

## webpack for jade (pug is new name for jade)

- install pug-loader and html-webpack-plugin 

        npm i pug-loader html-webpack-plugin -S
    
- loade multiple pug then output html for jekyll
    
        // for creation of HTML
        const HtmlWebpackPlugin = require('html-webpack-plugin');

        ...
        /**
        * loop multiple files
        */
        let entryHtmlPlugins = Object.keys(getEntryList('pug')).map(function(entryName){
          let v = getEntryList('pug')[entryName]; // get full path
          let filenamePath = v.split(/src\/([^.]*)/)[1] +'.html';
          let templatePath = v.split(/(src\/.*)/)[1];
          // filter chunks config
          let chunkList = [];
          switch(entryName){
            case 'default':
              chunkList.push('commons','index');
          }
          return new HtmlWebpackPlugin({
            filename: filenamePath,
            chunks: chunkList,
            template: templatePath
          })
        });
        ...

        ...
        /********* pug to js */
        {
          test:/\.pug$/,
          exclude: ['/node_modules/','src/layouts/post.pug'],
          loader: 'pug-html-loader',
          query: {
            pretty: true // must be pretty html for jekyll
          }
        },
        ...
          
        ... 
          plugins: [
            ...
        ].concat(entryHtmlPlugins)
        ...

## webpack for stylus

- install stylus-loader and extract-text-webpack-plugin

        npm i stylus-loader extract-text-webpack-plugin -S
    
- load multiple stylus then extract css for html

        // for extract css
        const ExtractTextPlugin = require('extract-text-webpack-plugin');

        ...
        // path
        const path = require('path');
        const PATHS = {
          app: path.join(__dirname, 'src'),
          bin: path.join(__dirname, '')
        };
        ...

        ...
        // for get multiple entry list
        function getEntryList (type) {
          let glob = require('glob');
          let fileList = [];

          let entryList = glob.sync(PATHS.app+'/**/*.'+type).reduce(function(o,v,i) {
            let regex = /([^\/]+)(?=\.\w+$)/;
            let index = v.match(regex)[0];
            o[index] = v;
            return o;
          },{});
          return entryList;
        } 
        ...

        ...
        module.exports = {
          entry: getEntryList('ts'),
          output: {
            path: PATHS.bin,
            publicPath: debug ? './':'{{site.baseurl}}/',
            filename: debug ? 'js/[name].js' : 'js/[name]-[hash:8].js'
          },
        ...
      
        plugins: [
          ...
          /** extract css */
          new ExtractTextPlugin('css/[name].css'),
          ...
        ]

## webpack for font-awesome

- install url-loader file-loader

        npm i font-awesome url-loader file-loader -S

- config woff, woff2, ttf, eot, svg for font-awesome
        ...
        loaders: [
            {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name].[ext]"
          }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name].[ext]"
          }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=application/octet-stream&name=./fonts/[name].[ext]"
          }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "file?&name=./fonts/[name].[ext]":"file?&name=./fonts/[name]-[hash:8].[ext]"
          }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=image/svg+xml&name=./fonts/[name].[ext]"
          },
        ...

## local debug jekyll

- install browser-sync, browser-sync-webpack-plugin, gulp 

        npm i browser-sync browser-sync-webpack-plugin gulp -S

- build webpack then start jekyll in child_process


        const webpackConfig = require('./webpack.config.js');
        const child = require('child_process');
        const jekyllCommand   = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
        var messages = {
            jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
        };

        /**
        * start jekyll with watch
        */
        gulp.task('jekyll', () => {
          const jekyll = child.spawn('jekyll', ['build',
            '--watch',
            '--incremental',
            '--drafts'
          ]);

          const jekyllLogger = (buffer) => {
            buffer.toString()
              .split(/\n/)
              .forEach((message) => gutil.log('Jekyll: ' + message));<commit_msg>add blank return for webpack for jekyll<commit_after>---
layout: post
tilte: webpack for jekyll
---

# why
- because you can build github page site with webpack, jade and stylus, so nice.

# before start
* you should know [webpack](https://webpack.github.io/)
* you should know [jade](http://jade-lang.com/)
* you should know [stylus](http://stylus-lang.com/)

# workflow

## webpack for jade (pug is new name for jade)

* install pug-loader and html-webpack-plugin 


        npm i pug-loader html-webpack-plugin -S
    
    
* loade multiple pug then output html for jekyll
    
    
        // for creation of HTML
        const HtmlWebpackPlugin = require('html-webpack-plugin');

        ...
        /**
        * loop multiple files
        */
        let entryHtmlPlugins = Object.keys(getEntryList('pug')).map(function(entryName){
          let v = getEntryList('pug')[entryName]; // get full path
          let filenamePath = v.split(/src\/([^.]*)/)[1] +'.html';
          let templatePath = v.split(/(src\/.*)/)[1];
          // filter chunks config
          let chunkList = [];
          switch(entryName){
            case 'default':
              chunkList.push('commons','index');
          }
          return new HtmlWebpackPlugin({
            filename: filenamePath,
            chunks: chunkList,
            template: templatePath
          })
        });
        ...

        ...
        /********* pug to js */
        {
          test:/\.pug$/,
          exclude: ['/node_modules/','src/layouts/post.pug'],
          loader: 'pug-html-loader',
          query: {
            pretty: true // must be pretty html for jekyll
          }
        },
        ...
          
        ... 
          plugins: [
            ...
        ].concat(entryHtmlPlugins)
        ...

## webpack for stylus

* install stylus-loader and extract-text-webpack-plugin


        npm i stylus-loader extract-text-webpack-plugin -S
    
    
* load multiple stylus then extract css for html

        // for extract css
        const ExtractTextPlugin = require('extract-text-webpack-plugin');

        ...
        // path
        const path = require('path');
        const PATHS = {
          app: path.join(__dirname, 'src'),
          bin: path.join(__dirname, '')
        };
        ...

        ...
        // for get multiple entry list
        function getEntryList (type) {
          let glob = require('glob');
          let fileList = [];

          let entryList = glob.sync(PATHS.app+'/**/*.'+type).reduce(function(o,v,i) {
            let regex = /([^\/]+)(?=\.\w+$)/;
            let index = v.match(regex)[0];
            o[index] = v;
            return o;
          },{});
          return entryList;
        } 
        ...

        ...
        module.exports = {
          entry: getEntryList('ts'),
          output: {
            path: PATHS.bin,
            publicPath: debug ? './':'{{site.baseurl}}/',
            filename: debug ? 'js/[name].js' : 'js/[name]-[hash:8].js'
          },
        ...
      
        plugins: [
          ...
          /** extract css */
          new ExtractTextPlugin('css/[name].css'),
          ...
        ]

## webpack for font-awesome

* install url-loader file-loader


        npm i font-awesome url-loader file-loader -S


* config woff, woff2, ttf, eot, svg for font-awesome
        ...
        loaders: [
            {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name].[ext]"
          }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name].[ext]"
          }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=application/octet-stream&name=./fonts/[name].[ext]"
          }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "file?&name=./fonts/[name].[ext]":"file?&name=./fonts/[name]-[hash:8].[ext]"
          }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader:  "url?limit=10000&mimetype=image/svg+xml&name=./fonts/[name].[ext]"
          },
        ...

## local debug jekyll

* install browser-sync, browser-sync-webpack-plugin, gulp 


        npm i browser-sync browser-sync-webpack-plugin gulp -S


* build webpack then start jekyll in child_process


        const webpackConfig = require('./webpack.config.js');
        const child = require('child_process');
        const jekyllCommand   = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
        var messages = {
            jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
        };

        /**
        * start jekyll with watch
        */
        gulp.task('jekyll', () => {
          const jekyll = child.spawn('jekyll', ['build',
            '--watch',
            '--incremental',
            '--drafts'
          ]);

          const jekyllLogger = (buffer) => {
            buffer.toString()
              .split(/\n/)
              .forEach((message) => gutil.log('Jekyll: ' + message));
{'fraction_non_alphanumeric': 0.17057611149278634, 'fraction_numerical': 0.005692413386985965, 'mean_word_length': 1.5468632841789554, 'pattern_counts': {'":': 2, '<': 7, '<?xml version=': 0, '>': 13, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4809272', 'n_tokens_mistral': 3226, 'n_tokens_neox': 3045, 'n_words': 625}