我有以下Laravel Mix配置:
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资产通过Twigpack包含在Twig模板中,如下所示:
{{ 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混合任务?