无法使用 Lando 使 webpack --watch 或开发服务器在 运行 本地 Drupal 环境中工作
Cannot get webpack --watch or dev server to work using Lando to run a local Drupal environment
我已经在互联网上搜索过一些零零碎碎的东西，但没有任何东西适合我。我有一个本地 Drupal 环境 运行 Lando。我已经成功安装并配置了 webpack。一切正常，除非我尝试观看或热重载。
当我 运行 lando npm run build-dev（当前使用 webpack --watch 时，我可以看到我的更改已成功编译到正确的文件夹中。但是，当我刷新我的 Drupal 站点时，我没有看到变化。我唯一一次看到我更新的 JS 变化是当我 运行 lando drush cr 清除缓存时。当我尝试配置 webpack-dev-server. 时，同样的事情发生了我可以得到一切注意变化并正确编译，但我无法让我的浏览器重新加载我的文件，它们保持缓存状态。我很茫然。
我已经尝试在我的 .lando.yml 中配置代理，并尝试使用 devServer 的配置选项进行不同的操作。我只是没有得到一个简明的答案，而且我只是没有知识来准确理解正在发生的事情。我相信这与 Docker 容器未暴露给 webpack (??) 有关，但我不明白如何正确配置它。
这些是我在 package.json 中设置的脚本，build 将我的生产就绪文件输出到 i_screamz/js/dist，build-dev 启动监视并编译非 -缩小版本到 i_screamz/js/dist-dev - start 我在这里是为了让 devServer 工作。我想要 webpack-dev-server 运行ning 因为我希望重新加载工作。
"scripts": {
"start": "npm run build:dev",
"build:dev": "webpack --watch --progress --config webpack.config.js",
"build": "NODE_ENV=production webpack --progress --config webpack.config.js"
},
这是我的 webpack.config.js - 还没有 sass，这只是一个工作的模块化 js 构建。
const path = require("path");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const isDevMode = process.env.NODE_ENV !== 'production';
module.exports = {
mode: isDevMode ? 'development' : 'production',
devtool: isDevMode ? 'source-map' : false,
entry: {
main: ['./src/index.js']
},
output: {
filename: isDevMode ? 'main-dev.js' : 'main.js',
path: isDevMode ? path.resolve(__dirname, 'js/dist-dev') : path.resolve(__dirname, 'js/dist'),
publicPath: '/web/themes/custom/[MYSITE]/js/dist-dev'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new BrowserSyncPlugin({
proxy: {
target: 'http://[MYSITE].lndo.site/',
proxyReq: [
function(proxyReq) {
proxyReq.setHeader('Cache-Control', 'no-cache, no-store');
}
]
},
open: false,
https: false,
files: [
{
match: ['**/*.css', '**/*.js'],
fn: (event, file) => {
if (event == 'change') {
const bs = require("browser-sync").get("bs-webpack-plugin");
if (file.split('.').pop()=='js') {
bs.reload();
} else {
bs.stream();
}
}
}
}
]
}, {
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false,
injectCss: true,
name: 'bs-webpack-plugin'
}),
],
watchOptions: {
aggregateTimeout: 300,
ignored: ['**/*.woff', '**/*.json', '**/*.woff2', '**/*.jpg', '**/*.png', '**/*.svg', 'node_modules'],
}
};
这是我在 .lando.yml 中设置的配置 - 我在此处确实有代理密钥，但由于我无法正确设置，它已被删除。
name: [MYSITE]
recipe: pantheon
config:
framework: drupal8
site: [MYPANTHEONSITE]
services:
node:
type: node
build:
- npm install
tooling:
drush:
service: appserver
env:
DRUSH_OPTIONS_URI: "http://[MYSITE].lndo.site"
npm:
service: node
settings.local.php
<?php
/**
* Disable CSS and JS aggregation.
*/
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;
我已经更新了上面的代码文件以反映 webpack 的最终工作设置。主要答案是在
/web/sites/default/settings.local.php
** 禁用 CSS & JS 聚合。 **
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;
我从 saschaeggi and just tinkered around until I found this setting. So thank you! I also found more about what this means here 中找到了一个有效的设置。这个问题让我花了比我想承认的时间更长的时间，而且它是如此简单。我不知道为什么 'Disabling Caching css/js aggregation' 页面在我疯狂搜索缓存问题时从未出现。希望这个答案可以帮助处于这种极端情况困境中的其他人。
我在我的主题根文件夹中使用我的 Drupal 主题文件设置了 webpack。我 运行 一切都与 Lando 相关，包括 NPM。我发现了一个巧妙的技巧，可以将 dist-dev 和 dist 库从 thinkshout.
切换为开发/生产构建
我应该注意到我的设置不包括 hot-reloading 但我至少可以编译我的文件并立即刷新并查看我的更改。我之前遇到的问题是我必须将手表停到 drush cr，而且这个工作流程很荒谬。我从来没有使用 BrowserSync 或 Webpack Dev Server 进行热重载，我可能会再次尝试，但此时我需要继续我的生活。
我还注意到包含 sass，因此这些文件路径将更改为包括 .scss 和 .js 文件的编译和输出，但这是基本的最小设置工作。
我已经在互联网上搜索过一些零零碎碎的东西，但没有任何东西适合我。我有一个本地 Drupal 环境 运行 Lando。我已经成功安装并配置了 webpack。一切正常，除非我尝试观看或热重载。
当我 运行 lando npm run build-dev（当前使用 webpack --watch 时，我可以看到我的更改已成功编译到正确的文件夹中。但是，当我刷新我的 Drupal 站点时，我没有看到变化。我唯一一次看到我更新的 JS 变化是当我 运行 lando drush cr 清除缓存时。当我尝试配置 webpack-dev-server. 时，同样的事情发生了我可以得到一切注意变化并正确编译，但我无法让我的浏览器重新加载我的文件，它们保持缓存状态。我很茫然。
我已经尝试在我的 .lando.yml 中配置代理，并尝试使用 devServer 的配置选项进行不同的操作。我只是没有得到一个简明的答案，而且我只是没有知识来准确理解正在发生的事情。我相信这与 Docker 容器未暴露给 webpack (??) 有关，但我不明白如何正确配置它。
这些是我在 package.json 中设置的脚本，build 将我的生产就绪文件输出到 i_screamz/js/dist，build-dev 启动监视并编译非 -缩小版本到 i_screamz/js/dist-dev - start 我在这里是为了让 devServer 工作。我想要 webpack-dev-server 运行ning 因为我希望重新加载工作。
"scripts": {
"start": "npm run build:dev",
"build:dev": "webpack --watch --progress --config webpack.config.js",
"build": "NODE_ENV=production webpack --progress --config webpack.config.js"
},
这是我的 webpack.config.js - 还没有 sass，这只是一个工作的模块化 js 构建。
const path = require("path");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const isDevMode = process.env.NODE_ENV !== 'production';
module.exports = {
mode: isDevMode ? 'development' : 'production',
devtool: isDevMode ? 'source-map' : false,
entry: {
main: ['./src/index.js']
},
output: {
filename: isDevMode ? 'main-dev.js' : 'main.js',
path: isDevMode ? path.resolve(__dirname, 'js/dist-dev') : path.resolve(__dirname, 'js/dist'),
publicPath: '/web/themes/custom/[MYSITE]/js/dist-dev'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new BrowserSyncPlugin({
proxy: {
target: 'http://[MYSITE].lndo.site/',
proxyReq: [
function(proxyReq) {
proxyReq.setHeader('Cache-Control', 'no-cache, no-store');
}
]
},
open: false,
https: false,
files: [
{
match: ['**/*.css', '**/*.js'],
fn: (event, file) => {
if (event == 'change') {
const bs = require("browser-sync").get("bs-webpack-plugin");
if (file.split('.').pop()=='js') {
bs.reload();
} else {
bs.stream();
}
}
}
}
]
}, {
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false,
injectCss: true,
name: 'bs-webpack-plugin'
}),
],
watchOptions: {
aggregateTimeout: 300,
ignored: ['**/*.woff', '**/*.json', '**/*.woff2', '**/*.jpg', '**/*.png', '**/*.svg', 'node_modules'],
}
};
这是我在 .lando.yml 中设置的配置 - 我在此处确实有代理密钥，但由于我无法正确设置，它已被删除。
name: [MYSITE]
recipe: pantheon
config:
framework: drupal8
site: [MYPANTHEONSITE]
services:
node:
type: node
build:
- npm install
tooling:
drush:
service: appserver
env:
DRUSH_OPTIONS_URI: "http://[MYSITE].lndo.site"
npm:
service: node
settings.local.php
<?php
/**
* Disable CSS and JS aggregation.
*/
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;
我已经更新了上面的代码文件以反映 webpack 的最终工作设置。主要答案是在
/web/sites/default/settings.local.php
** 禁用 CSS & JS 聚合。 **
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;
我从 saschaeggi and just tinkered around until I found this setting. So thank you! I also found more about what this means here 中找到了一个有效的设置。这个问题让我花了比我想承认的时间更长的时间，而且它是如此简单。我不知道为什么 'Disabling Caching css/js aggregation' 页面在我疯狂搜索缓存问题时从未出现。希望这个答案可以帮助处于这种极端情况困境中的其他人。
我在我的主题根文件夹中使用我的 Drupal 主题文件设置了 webpack。我 运行 一切都与 Lando 相关，包括 NPM。我发现了一个巧妙的技巧，可以将 dist-dev 和 dist 库从 thinkshout.
切换为开发/生产构建我应该注意到我的设置不包括 hot-reloading 但我至少可以编译我的文件并立即刷新并查看我的更改。我之前遇到的问题是我必须将手表停到 drush cr，而且这个工作流程很荒谬。我从来没有使用 BrowserSync 或 Webpack Dev Server 进行热重载，我可能会再次尝试，但此时我需要继续我的生活。
我还注意到包含 sass，因此这些文件路径将更改为包括 .scss 和 .js 文件的编译和输出，但这是基本的最小设置工作。