我创建了以下conf:
const mix = require ('laravel-mix');
const glob = require ('glob')
const path = require ('path')
const CleanWebpackPlugin = require ('clean-webpack-plugin')
/*
|--------------------------------------------------------------------------
| Mix config
|--------------------------------------------------------------------------
*/
mix.options ({
postCss: [require ('autoprefixer')]
});
/*
|--------------------------------------------------------------------------
| Webpack config
|--------------------------------------------------------------------------
*/
mix.webpackConfig ({
output: {
chunkFilename: 'chunks/[name].[chunkhash].js'
},
plugins: [
new CleanWebpackPlugin ({
cleanOnceBeforeBuildPatterns: ['chunks/**/*']
}),
],
module: {
rules: [{
test: /node_modules(?:\/|\\).+\.js$/,
loader: 'babel-loader',
include: [
path.join (__dirname, 'node_modules/vue-echarts'),
path.join (__dirname, 'node_modules/resize-detector'),
path.join (__dirname, 'node_modules/vue-masonry')
]
}]
},
resolve: {
alias: {
'@': path.join (__dirname, 'resources/assets/src'),
'node_modules': path.join (__dirname, 'node_modules')
}
},
})
/*
|--------------------------------------------------------------------------
| Vendor assets
|--------------------------------------------------------------------------
*/
function mixAssetsDir (query, cb) {
(glob.sync ('resources/assets/' + query) || []).forEach (f => {
f = f.replace (/[\\\/]+/g, '/');
cb (f, f.replace ('resources/assets', 'public'));
});
}
const sassOptions = {
precision: 5,
implementation: () => require ('node-sass')
};
// Core javascripts
mixAssetsDir ('vendor/js/**/*.js', (src, dest) => mix.scripts (src, dest));
// Fonts
mixAssetsDir ('vendor/fonts/*.css', (src, dest) => mix.copy (src, dest));
mixAssetsDir ('vendor/fonts/*/*', (src, dest) => mix.copy (src, dest));
/*
|--------------------------------------------------------------------------
| Entry point
|--------------------------------------------------------------------------
*/
mix.js ('resources/assets/src/app.js', 'public');
if (Mix.isUsing ('hmr')) {
mix.disableNotifications ();
} else {
mix.version ();
}
如果我现在添加:
mix.js ('resources/assets/src/app.js', 'public').extract(['vue']);
app.js
不会存储在public
中,而是存储在chunks
中。这使得不可能使用
<script src="{{ mix('app.js') }}"></script>
或
<script src="{{ mix('chunks/app.js') }}"></script>
找不到app.js
,因为它已被版本化(请参阅mix-manifest.json
):
"/chunks//app.bcac72b900935193b194.js": "/chunks//app.bcac72b900935193b194.js?id=37f4d5877ebeaf16f640",