运行Webpack观察程序的超级简单的Lektor插件
lektor-webpack-support的Python项目详细描述
Lektor网页包支持
这是一个lektor插件，为项目添加了对webpack的支持。什么时候？
启用它可以将网页包项目从webpack/文件夹构建到
使用运行服务器（或生成进程）时自动运行资产文件夹
-f webpack标志。
启用插件
若要启用该插件，请在 坐在您的莱克托项目目录中：
lektor plugins add lektor-webpack-support
创建网页包项目
接下来你需要创建一个网页包项目。创建一个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 babel-core node-sass babel-loader sass-loader css-loader url-loader style-loader file-loader extract-text-webpack-plugin
这将安装webpack本身以及babel和sass以及
我们需要一堆加载程序来配置所有这些。因为我们
之前创建了一个package.json，我们使用--save-dev依赖项
将在package.json文件中被记住。
webpack/webpack.config.js
接下来是webpack配置文件。在这里，我们将用一个非常基本的
足以覆盖你将遇到的大多数事情的设置。这个
想法是将文件从webpack/scss和webpack/js构建到
assets/static/gen这样我们就可以使用它，即使我们没有webpack
安装的时间和其他人之前运行的时间一样长。
varwebpack=require('webpack');varpath=require('path');varExtractTextPlugin=require('extract-text-webpack-plugin');varoptions={entry:{'app':'./js/main.js','styles':'./scss/main.scss'},output:{path:path.dirname(__dirname)+'/assets/static/gen',filename:'[name].js'},devtool:'#cheap-module-source-map',resolve:{modulesDirectories:['node_modules'],extensions:['','.js']},module:{loaders:[{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'},{test:/\.scss$/,loader:ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')},{test:/\.css$/,loader:ExtractTextPlugin.extract('style-loader','css-loader')},{test:/\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g\|\.gif$/,loader:'file'}]},plugins:[newExtractTextPlugin('styles.css',{allChunks:true}),newwebpack.optimize.UglifyJsPlugin(),newwebpack.optimize.DedupePlugin()]};module.exports=options;
创建应用程序
现在我们可以开始构建我们的应用程序了。我们至少配置了两个文件
在网页包中：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这是莱克托接电话的地方
文件夹。这样做是为了让您可以发送webpack生成的资产
对于其他未安装webpack的用户，它简化了使用
使用Webpack的Lektor网站。
手动生成
若要手动触发同时调用webpack的生成，可以使用
lektor build -f webpack。
包括文件
现在需要在模板中包含这些文件。这样做：
<linkrel="stylesheet"href="{{ '/static/gen/styles.css'|asseturl }}"><scripttype=text/javascriptsrc="{{ '/static/gen/app.js'|asseturl }}"charset="utf-8"></script>
欢迎加入QQ群-->： 979659372
