Запуск сервера webpack dev пропускает все задачи смешивания - PullRequest
Новая
       122

Запуск сервера webpack dev пропускает все задачи смешивания

0 голосов
/ 11 июля 2020

У меня есть следующая Laravel Конфигурация смешивания: 

const mix = require("laravel-mix");
const path = require("path");
const tailwindcss = require("tailwindcss");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const config = {
  publicFolder: "web/dist",
}

mix.setPublicPath(config.publicFolder)
mix.disableNotifications();

mix.webpackConfig({
  plugins: [
    new CleanWebpackPlugin(),
  ],
});


mix.sass("resources/sass/main.scss", "web/dist/css")
  .options({
    processCssUrls: false,
    postCss: [tailwindcss("./tailwind.config.js")],
  });

mix.js("resources/js/main.js", path.join(config.publicFolder, "/js"));

mix.copy("resources/fonts", path.join(config.publicFolder, "/fonts"))
   .copy("resources/icons", path.join(config.publicFolder, "/icons"))
   .copy("resources/images", path.join(config.publicFolder, "/images"));

if (mix.inProduction()) {
  mix.version();
}

В моем package.json у меня есть следующий npm скрипт: 

{
"scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --progress --hide-modules  --config=node_modules/laravel-mix/setup/webpack.config.js"
}
}

CSS и JS ресурсы включаются в шаблон Twig через Twigpack, например: 

{{ craft.twigpack.includeCssModule("/css/main.css") }}
{{ craft.twigpack.includeJsModule("/js/main.js") }}

Если я изменяю сценарий NPM, чтобы просто использовать webpack вместо webpack-dev-server, все ресурсы включаются в шаблон правильно. По какой-то причине webpack-dev-server проигнорирует все ресурсы и покажет 404.

Вот конфигурация Twigpack: 

<?php

return [
    // Global settings
    '*' => [
        // If `devMode` is on, use webpack-dev-server to all for HMR (hot module reloading)
        'useDevServer' => false,
        // Enforce Absolute URLs on includes
        'useAbsoluteUrl' => true,
        // The JavaScript entry from the manifest.json to inject on Twig error pages
        // This can be a string or an array of strings
        'errorEntry' => '',
        // String to be appended to the cache key
        'cacheKeySuffix' => '',
       // Manifest file names
        'manifest' => [
            'legacy' => 'mix-manifest.json',
            'modern' => 'mix-manifest.json',
        ],
        // Public server config
        'server' => [
            'manifestPath' => '@webroot/dist',
            'publicPath' => '/dist/',
        ],
        // webpack-dev-server config
        'devServer' => [
            'manifestPath' => 'https://localhost:8080/dist',
            'publicPath' => 'https://localhost:8080/',
        ],
        // Bundle to use with the webpack-dev-server
        'devServerBuildType' => 'modern',
        // Whether to include a Content Security Policy "nonce" for inline
        // CSS or JavaScript. Valid values are 'header' or 'tag' for how the CSP
        // should be included. c.f.:
        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script
        'cspNonce' => '',
        // Local files config
        // Local files config
        'localFiles' => [
            'basePath' => '@webroot/dist',
            'criticalPrefix' => 'dist/',
            'criticalSuffix' => '_critical.min.css',
        ],
    ],
    // Live (production) environment
    'live' => [
    ],
    // Staging (pre-production) environment
    'staging' => [
    ],
    // Development environment
    'dev' => [
        // If `devMode` is on, use webpack-dev-server to all for HMR (hot module reloading)
        'useDevServer' => true,
    ],
];

Нужно ли мне передавать какой-то флаг npm, чтобы получить webpack-dev-server, чтобы не пропускать js и css задачи смешивания?

...