【问题标题】：Proper dev setup for Jekyll, Webpack, and VueJekyll、Webpack 和 Vue 的正确开发设置
【发布时间】：2017-04-23 21:14:03
【问题描述】：

我正在开发一个使用 Jekyll、Webpack 和 Vue 的项目样板。我目前有一个启动 webpack-dev-server 的 npm 脚本。作为一个业余爱好者，我想知道如何完成以下任务：

观察./vue文件夹中的文件是否有变化
更改时，捆绑到./src/assets/js/bundle.js
执行jekyll build，所以来自./src的文件被构建到./dist
刷新页面（或使用热模块更换）

任何建议，或朝着正确方向轻推都会令人惊叹。处于当前状态的 repo 在这里：https://github.com/jesselcampbell/peregrine

编辑

一种可能的解决方案可能是：

从等式中删除 webpack-dev-server
使用 Webpack --watch 自动将我的 ./vue 文件捆绑到 ./src/assets/js/
使用 jekyll-watch gem 观察 ./src 并在发生更改时重建到 ./dist
在开发过程中使用jekyll serve在本地运行网站

【问题讨论】：

标签： webpack vue.js jekyll

【解决方案1】：

我的设置完全相同，最终得到了一个可行的解决方案。

目录设置

_config.yml 在根文件夹：

destination: dist
source: src
keep_files: 
  - webpack

webpack 文件夹用于所有“webpackable”（JS、CSS、LESS、.vue、...），webpack.config.js 我用于初始设置：

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);

src 文件夹（在根级别，与 webpack 相同级别）我保存整个 Jekyll 内容和 .html 文件的位置。我的 footer.html 文件包含在所有文件中，导入 webpack/bundle.js。

一个dist文件夹，里面有编译好的文件，可以直接使用（在网络服务器，CDN，...）

工作原理

我在根文件夹中运行webpack（它监视文件夹）
它构建bundle.js 并将其放置在/dist/webpack 中。使用了一个子文件夹，以便 Jekyll 在编译时不会覆盖它（参见上面的 Jekyll 配置）。它也可能是一个文件，但我那里还有其他 webpack 发出的文件
它启动 Jekyll 构建和监视过程 - 在 src 上，输出到 dist
它启动了一个为dist服务的livereload服务器

当我修改 webpack 文件夹中的文件时，webpack 会重建 bundle.js。 livereload 服务器看到变化并更新浏览器。

当我修改 src 中的文件时，Jekyll 会看到更改并重建 .html 文件。 livereload 服务器看到变化并更新浏览器。

希望这会有所帮助。

【讨论】：

好东西。您愿意与您的构建过程共享一个工作存储库吗？

【解决方案2】：

看看Jekpack 这是我最近创建的 Jekyll 和 Webpack 的集成。它应该是你真正想要的。

【讨论】：

【解决方案3】：

杰西，检查 PM2。

http://pm2.keymetrics.io/

为了实现您想要做的事情，也许可以创建一个 .sh 文件，该文件运行您想要在监视资产更改时运行的命令。

这里也有一篇对你有用的文章：

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

-布莱斯

【讨论】：

【解决方案4】：

我使用 Jekyll、Vue 和 Webpack 创建了这个 repo。有多个入口点，包含通用和供应商 JavaScript 的块。

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

要启动 Webpack watch 和 Jekyll 服务，只需 npm run dev，它们将并行运行。

【讨论】：