我想将Webpack块与Laravel Mix一起使用。目前，此列表已输出：
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？答案 0 :(得分：4)
我会假设您正在构建一个利用Vue路由器的应用程序。
1）每当您以component: () => import('@/components/user')的方式在路径定义中导入组件时，都要回答第一个问题。您只是在告诉Webpack根据您在vue中的路由对应用程序包进行代码拆分。
这允许您的routes组件被延迟加载，从而减小您的主捆绑包大小，请参见https://router.vuejs.org/guide/advanced/lazy-loading.html。 每个x.js文件都是从路由定义中的动态组件导入创建的，并在需要时自动/延迟加载。 （您可以在xhr标签下的不同路径之间导航时打开控制台，随即会看到文件已加载。）
2）对于第二个问题，请检查另一个问题How Can I Make Webpack Use a Cache-Busting Suffix?
更新： 您还可以使用HtmlWebpackPlugin，它具有属性哈希（布尔值），该属性将自动将唯一的webpack编译哈希附加到所有包含的脚本和CSS文件中。但是，它仅包括css和js。您可能还需要哈希其他资源。
希望它会有所帮助：）
答案 1 :(得分：2)
默认情况下，分块的文件被编译到公用文件夹的根目录。
我个人觉得这很烦人，尤其是对于大型项目，因为您最终可能会遇到数百个.js块文件。
我更喜欢将它们编译到一个特定的文件夹，而无需用任何一种方式打开。
您可以通过如下更改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更改为您的首选名称。