我具有以下配置：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
if (mix.inProduction()) {
mix.version();
} else {
mix.sourceMaps();
}
// webpack.mix.js
const path = require('path'),
WebpackShellPlugin = require('webpack-shell-plugin'),
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
{CleanWebpackPlugin} = require('clean-webpack-plugin');
mix.webpackConfig({
plugins: [
new WebpackShellPlugin({
onBuildStart: [
'php artisan js-localization:export --quiet',
'php artisan ziggy:generate resources/js/ziggy-routes.js --quiet'
]
}),
new BundleAnalyzerPlugin({
analyzerMode: mix.inProduction() ? 'disabled' : 'server',
openAnalyzer: false
}),
new CleanWebpackPlugin({
dry: false,
cleanStaleWebpackAssets: true,
cleanOnceBeforeBuildPatterns: [],
cleanAfterEveryBuildPatterns: [
'js/chunk/*'
],
dangerouslyAllowCleanPatternsOutsideProject: false,
}),
],
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
},
},
output: {
publicPath: '/',
chunkFilename: mix.inProduction() ? 'js/chunk/[name].[chunkhash].js': 'js/chunk/[name].js',
}
});
mix
.js('resources/js/project.js', 'public/js')
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
当我删除.js('resources/js/app.js', 'public/js')或.js('resources/js/project.js', 'public/js')时，我的app.css具有有效的CSS代码。当我同时使用它们时，我的app.css完全为空，为0kb。
我也删除了BundleAnalyzerPlugin和CleanWebpackPlugin插件，但是结果仍然相同。我不知道为什么会这样。
当我运行npm run watch时，这是日志：
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run watch --scripts-prepend-node-path=auto
> @ watch /Users/username/Sites/smaragt-cms
> npm run development -- --watch
> @ development /Users/username/Sites/smaragt-cms
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
Executing pre-build scripts
10% building 2/2 modules 0 active
webpack is watching the files…
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 15922ms 10:10:55 AM
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
Asset Size Chunks Chunk Names
/css/app.css 0 bytes /js/app, /js/manifest, /js/project [emitted] /js/app, /js/manifest, /js/project
/js/manifest.js 8.95 KiB /js/manifest [emitted] /js/manifest
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?5063b105c7646c8043d58c5289f02cca 128 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?a9c4bb7348f42626454c988dbde1d0a0 684 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?06147b6cd88c7346cecd1edd060cd5de 128 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?cccc9d29470e879e40eb70249d9a2705 73.6 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?c5e0f14f88a828261ba01558ce2bf26f 86.4 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?c1a866ec0e04a5e1915b41fcf261457c 33.6 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?7b9568e6389b1f8ae0902cd39665fc1e 141 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?65b286af947c0d982ca01b40e1fcab38 33.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?f5f2566b93e89391da4db79462b8078b 13.3 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?c4f508e7c4f01a9eeba7f08155cde04e 16.4 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?8e4a6dcc692b3887f9f542cd6894d6d4 188 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?c2801fb415f03c7b170934769d7b5397 823 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?0bff33a5fd7ec390235476b4859747a0 188 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?44d537ab79f921fde5a28b2c1636f397 74 KiB [emitted]
fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?333bae208dc363746961b234ff6c2500 96.1 KiB [emitted]
js/chunk//js/app.js 131 KiB /js/app [emitted] /js/app
js/chunk//js/project.js 36.5 KiB /js/project [emitted] /js/project
js/chunk//js/vendor.js 12 MiB /js/vendor [emitted] /js/vendor
js/chunk/0.js 312 KiB 0 [emitted]
js/chunk/1.js 306 KiB 1 [emitted]
js/chunk/10.js 310 KiB 10 [emitted]
js/chunk/11.js 42.8 KiB 11 [emitted]
js/chunk/12.js 46.5 KiB 12 [emitted]
js/chunk/13.js 380 KiB 13 [emitted]
js/chunk/14.js 35.1 KiB 14 [emitted]
js/chunk/15.js 49.7 KiB 15 [emitted]
js/chunk/16.js 27.5 KiB 16 [emitted]
js/chunk/17.js 24.1 KiB 17 [emitted]
js/chunk/18.js 21.3 KiB 18 [emitted]
js/chunk/19.js 14.7 KiB 19 [emitted]
js/chunk/2.js 74.1 KiB 2 [emitted]
js/chunk/20.js 14 KiB 20 [emitted]
js/chunk/21.js 16.9 KiB 21 [emitted]
js/chunk/22.js 20.4 KiB 22 [emitted]
js/chunk/23.js 17.9 KiB 23 [emitted]
js/chunk/24.js 17.5 KiB 24 [emitted]
js/chunk/25.js 18.3 KiB 25 [emitted]
js/chunk/26.js 30.3 KiB 26 [emitted]
js/chunk/27.js 54.4 KiB 27 [emitted]
js/chunk/28.js 47.3 KiB 28 [emitted]
js/chunk/29.js 54.3 KiB 29 [emitted]
js/chunk/3.js 35.3 KiB 3 [emitted]
js/chunk/30.js 33.5 KiB 30 [emitted]
js/chunk/4.js 33.5 KiB 4 [emitted]
js/chunk/5.js 36.3 KiB 5 [emitted]
js/chunk/6.js 354 KiB 6 [emitted]
js/chunk/7.js 67.8 KiB 7 [emitted]
js/chunk/8.js 378 KiB 8 [emitted]
js/chunk/9.js 306 KiB 9 [emitted]
WAIT Compiling... 10:11:00 AM
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 371ms 10:11:00 AM
Asset Size Chunks Chunk Names
/css/app.css 0 bytes /js/app, /js/manifest, /js/project [emitted] /js/app, /js/manifest, /js/project
js/chunk//js/app.js 131 KiB /js/app [emitted] /js/app
js/chunk//js/project.js 36.6 KiB /js/project [emitted] /js/project
js/chunk//js/vendor.js 12 MiB /js/vendor [emitted] /js/vendor
js/chunk/31.js 40.5 KiB 31 [emitted]
+ 32 hidden assets
只是一个想法，但是在编译之前如果/否则可能会在生产中造成干扰。实质上，这是相同的调用，只是以不同或链接的方式编写。还添加了.extract()以查看是否有帮助，并更改了别名解析的顺序。
const mix = require('laravel-mix');
const path = require('path');
const WebpackShellPlugin = require('webpack-shell-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
},
},
plugins: [
new WebpackShellPlugin({
onBuildStart: [
'php artisan js-localization:export --quiet',
'php artisan ziggy:generate resources/js/ziggy-routes.js --quiet'
]
}),
new BundleAnalyzerPlugin({
analyzerMode: mix.inProduction() ? 'disabled' : 'server',
openAnalyzer: false
}),
new CleanWebpackPlugin({
dry: false,
cleanStaleWebpackAssets: true,
cleanOnceBeforeBuildPatterns: [],
cleanAfterEveryBuildPatterns: [
'js/chunk/*'
],
dangerouslyAllowCleanPatternsOutsideProject: false,
}),
],
output: {
publicPath: '/',
chunkFilename: mix.inProduction() ? 'js/chunk/[name].[chunkhash].js': 'js/chunk/[name].js',
}
})
.js('resources/js/project.js', 'public/js')
.js('resources/js/app.js', 'public/js')
.extract()
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
} else {
mix.sourceMaps();
}