Laravelミックスを持つウェブパックチャンク名
LaravelミックスでWebPackチャンクを使用したいです。現時点ではこのリストが出力されます。
Asset Size Chunks Chunk Names
/entry-point.js 3.37 MiB /entry-point [emitted] /entry-point
0.js 57.9 KiB 0 [emitted]
1.js 20.7 KiB 1 [emitted]
10.js 24.2 KiB 10 [emitted]
11.js 17.8 KiB 11 [emitted]
12.js 17.3 KiB 12 [emitted]
13.js 20.3 KiB 13 [emitted]
14.js 34.3 KiB 14 [emitted]
15.js 16.3 KiB 15 [emitted]
16.js 16.3 KiB 16 [emitted]
17.js 18.8 KiB 17 [emitted]
18.js 9.34 KiB 18 [emitted]
19.js 18.2 KiB 19 [emitted]
2.js 487 KiB 2 [emitted]
20.js 18.2 KiB 20 [emitted]
21.js 17.2 KiB 21 [emitted]
22.js 13.3 KiB 22 [emitted]
23.js 54 KiB 23 [emitted]
24.js 53.8 KiB 24 [emitted]
25.js 17.9 KiB 25 [emitted]
26.js 23.6 KiB 26 [emitted]
27.js 29.4 KiB 27 [emitted]
28.js 29.4 KiB 28 [emitted]
29.js 19.5 KiB 29 [emitted]
3.js 128 KiB 3 [emitted]
30.js 17 KiB 30 [emitted]
31.js 13.1 KiB 31 [emitted]
32.js 33.4 KiB 32 [emitted]
4.js 104 KiB 4 [emitted]
5.js 70.1 KiB 5 [emitted]
6.js 82.9 KiB 6 [emitted]
7.js 89.1 KiB 7 [emitted]
8.js 959 KiB 8 [emitted]
9.js 38.1 KiB 9 [emitted]
ルート定義：
export default [{
path: '/user',
component: Layout2,
children: [
{
path: '/',
name: 'user',
component: () => /* webpackChunkName: "view-[request]" */ import('@/components/user'),
},
]
}]
WebPACK設定：
/**
* As our first step, we'll pull in the user's webpack.mix.js
* file. Based on what the user requests in that file,
* a generic config object will be constructed for us.
*/
let mix = require('laravel-mix/src/index');
let ComponentFactory = require('laravel-mix/src/components/ComponentFactory');
new ComponentFactory().installAll();
require(Mix.paths.mix());
/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/
Mix.dispatch('init', Mix);
/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/
let WebpackConfig = require('laravel-mix/src/builder/WebpackConfig');
const config = new WebpackConfig().build();
// Inject sass-loader options
config.module.rules
.filter(rule => rule.test.test && (rule.test.test('.sass') || rule.test.test('.scss')))
.forEach(rule => {
const sassLoader = rule.loaders.find(loader => loader.loader === 'sass-loader');
if (sassLoader) {
Object.assign(sassLoader.options, {
precision: 5,
implementation: require('node-sass')
});
}
});
// Fix Hot Module Replacement bug
if (Mix.isUsing('hmr')) {
// Remove leading '/' from entry keys
config.entry = Object.keys(config.entry)
.reduce((entries, entry) => {
entries[entry.replace(/^\//, '')] = config.entry[entry];
return entries;
}, {});
// Remove leading '/' from ExtractTextPlugin instances
config.plugins
.forEach((plugin) => {
if (plugin.constructor.name === 'ExtractTextPlugin') {
plugin.filename = plugin.filename.replace(/^\//, '');
}
});
}
module.exports = config;
今、私はなぜすべてのファイルが0.jsなどに名前が付けられ、webpackChunkNameのようなものではありません。
さらに、私のブラウザが常にそれらをキャッシュするので、チャンクのキャッシュバスティングを使用したいので、WebPackを再実行すると、キャッシュを完全にクリアする必要があります。
私の質問は次のとおりです。
WebpackChunkNameを正しく利用できますか？- チャンクのキャッシングを防ぐにはどうすればよいですか。
デフォルトでは、チャンクされたファイルはパブリックフォルダのルートにコンパイルされます。
個人的には、あなたは何百もの.js chunkファイルを終わらせることができるので、私は特に大きなプロジェクトのためにこの厄介なことを見つけます。
私はそれらを特定のフォルダにコンパイルすることを好みます。どちらの方法で開く必要はありません。
次のようにwebpack.mix.jsでチャンクパスを変更することでこれを実現できます。
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js/main');
mix.webpackConfig({
output: {
filename:'js/main/[name].js',
chunkFilename: 'js/chunks/[name].js',
},
});
ブレードでは、正しいファイルを次のように参照してください。
<script src="{{ mix('js/main/app.js') }}"></script>
注意してください。フォルダの名前をmainまたはchunksから希望の名前に変更できます。