4

I'm working on a project boilerplate that uses Jekyll, Webpack, and Vue. I've currently got an npm script that starts the webpack-dev-server. As a bit of an amateur at this, I'm wondering how I might accomplish the following:

  • watch files in ./vue folder for changes
  • on change, bundle to ./src/assets/js/bundle.js
  • execute jekyll build so files from ./src are built to ./dist
  • refresh the page (or use hot module replacement)

Any advice, or a nudge in the right direction would be amazing. The repo, in its current state, is here: https://github.com/jesselcampbell/peregrine

Edit

One possible solution might be:

  • axe webpack-dev-server from the equation
  • use Webpack --watch to automate bundling of my ./vue files to ./src/assets/js/
  • use the jekyll-watch gem to watch ./src and rebuild to ./dist when changes occur
  • use jekyll serve to run the site locally during development
jesselcampbell
  • 55
  • 4

4 Answers4

1

I have exactly the same setup and ended up with a working solution.

Directories setup

_config.yml in the root folder:

destination: dist
source: src
keep_files: 
  - webpack

A webpack folder for everything "webpackable" (JS, CSS, LESS, .vue, ...), the webpack.config.js I use for initial setups:

const path = require('path');
const webpack = require('webpack')
const WebpackShellPlugin = require('webpack-shell-plugin')

module.exports = {
    watch: true,
    entry: path.join(__dirname, 'entry.js'),
    output: {
        path: path.join(__dirname, '..', 'dist', 'webpack'),
        filename: 'bundle.js',
        publicPath: '/webpack/'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            },
        ]
    },
    plugins: [
        // https://stackoverflow.com/a/39283602/903011
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new WebpackShellPlugin({onBuildStart:['cd .. && jekyll b --watch']})
    ]
}

// start live server
var liveServer = require("live-server");
var params = {
    port: 8080, // Set the server port. Defaults to 8080.
    root: "../dist", // Set root directory that's being served. Defaults to cwd.
    open: true, // When false, it won't load your browser by default.
    logLevel: 1, // 0 = errors only, 1 = some, 2 = lots
};
liveServer.start(params);

A src folder (at root level, same level as webpack) where I keep the whole Jekyll stuff, and .html files. My footer.html file included with all files imports webpack/bundle.js.

A dist folder with the compiled files, it can be used directly (on a web server, a CDN, ...)

How it works

  • I run webpack in the root folder (it watches the folder)
  • it builds bundle.js and places it in /dist/webpack. A subfolder is used so that it is not overwritten by Jekyll upon compilation (see Jekyll config above). It could also be a file, but I have other webpack-emitted files there
  • it starts a Jekyll build and watch process - on src, outputting to dist
  • it starts a livereload server which serves dist

When I modify a file in the webpack folder, webpack rebuilds bundle.js. The livereload server sees a change and updates the browser.

When I modify a file in src, Jekyll sees the change and rebuilds the .html files. The livereload server sees a change and updates the browser.

Hope this helps.

WoJ
  • 27,165
  • 48
  • 180
  • 345
1

take a look at Jekpack This is an integration of Jekyll and Webpack I recently created. It should be what you really want.

Yi Feng Xie
  • 4,378
  • 1
  • 26
  • 29
0

Jesse, look into PM2.

http://pm2.keymetrics.io/

To achieve what you're wanting to do, perhaps create an .sh file that runs the commands you want to run when a watched asset is changed.

Here's a useful article for you as well:

https://medium.com/dailyjs/vue-js-simultaneously-running-express-and-webpack-dev-server-292f4a7ed7a3

-Brice

Brice Lucas
  • 11
0

I have created this repo with Jekyll, Vue, and Webpack. There are multiple entry points, with chunks for common and vendor JavaScript.

https://github.com/PierBover/jekyll-vue-webpack-starter-kit

To start Webpack watch and Jekyll serve simply npm run dev and they will run in parallel.

Pier
  • 10,298
  • 17
  • 67
  • 113