lektor-webpack-support

这是一个为 Lektor 添加对 webpack 支持的插件。启用后，它可以从 webpack/ 文件夹自动构建 webpack 项目到资产文件夹，当服务器（或构建过程）带有 -f webpack 标志运行时。

启用插件

要启用此插件，请将以下内容添加到您的项目文件中，在 Lektor 项目的目录中运行此命令

lektor plugins add lektor-webpack-support

创建 Webpack 项目

接下来，您需要创建一个 webpack 项目。创建一个 webpack/ 文件夹，并在该文件夹中创建 package.json 和一个 webpack.config.js

webpack/package.json

此文件指示 npm 我们需要哪些包。开始时我们只需要创建一个几乎为空文件（名称和版本字段是必需的，但对功能不重要，根据您的需要更改它们）

{
  "name": "lektor-webpack",
  "version": "1.0.0",
  "private": true
}

现在我们可以 npm install（或 yarn add）剩余的包

$ cd </path/to/your/lektor/project>/webpack
$ npm install --save-dev webpack webpack-cli @babel/core sass babel-loader sass-loader css-loader url-loader file-loader mini-css-extract-plugin

这将安装 webpack 本身以及 babel 和 scss，以及我们需要配置所有这些的一组加载器。因为我们之前创建了一个 package.json 文件，并且我们使用了 --save-dev，所以依赖关系将被保存在 package.json 文件中。

webpack/webpack.config.js

接下来是 webpack 配置文件。这里我们将使用一个非常基础的设置，这对于覆盖您可能会遇到的大部分内容已经足够了。想法是将 webpack/scss 和 webpack/js 中的文件构建到 assets/static/gen，这样即使我们没有安装 webpack，也可以使用它，只要有人之前运行过它。

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = = {
  entry: {
    app: "./js/main.js",
    styles: "./scss/main.scss",
  },
  output: {
    path: path.join(path.dirname(__dirname), "assets", "static", "gen"),
    filename: "[name].js",
  },
  devtool: "source-map",
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(woff2?|ttf|eot|svg|png|jpe?g|gif)$/,
        use: ["file"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({ filename: "styles.css" })],
};

创建应用

现在我们可以开始构建我们的应用了。我们在 webpack 中至少配置了两个文件：js/main.js 和 scss/main.scss。这些都是我们需要的有入口点。您可以在 webpack/js/main.js 和 webpack/scss/main.scss 中创建它们作为空文件。

运行服务器

现在您可以开始了。当您运行 lektor server 时，webpack 不会运行，您现在需要以 lektor server -f webpack 的方式运行它，这将启用 webpack 构建。Webpack 会自动将您的文件构建到 assets/static/gen，然后 Lektor 会从那里选择文件。这样做是为了您可以将 webpack 生成的资产发送给其他人，即使他们没有安装 webpack，这也简化了使用 webpack 的 Lektor 网站。

手动构建

要手动触发构建并调用 webpack，您可以使用 lektor build -f webpack。

包含文件

现在您需要将文件包含到模板中。这样做

<link rel="stylesheet" href="{{ '/static/gen/styles.css'|asseturl }}">
<script type=text/javascript src="{{ '/static/gen/app.js'|asseturl }}" charset="utf-8"></script>