使用 Laravel Mix 的 Webpack 块名称
Posted
技术标签:
【中文标题】使用 Laravel Mix 的 Webpack 块名称【英文标题】：Webpack chunk names with Laravel Mix 【发布时间】：2019-10-01 09:36:59 【问题描述】：我想在 Laravel Mix 中使用 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？
如何防止缓存块？
【问题讨论】：
【参考方案1】：默认情况下，分块文件编译到公用文件夹的根目录。
就我个人而言，我觉得这很烦人，尤其是对于大型项目，因为您最终可能会得到数百个 .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 更改为您喜欢的名称。
【讨论】：
【参考方案2】：我假设您正在构建一个使用 Vue 路由器的应用程序。
1) 要回答您的第一个问题，每当您以这种方式在路由定义中导入组件时component: () => import('@/components/user')。您只是在告诉 webpack 根据您在 vue 中的路由对应用程序包进行代码拆分。
这允许你的路由组件被延迟加载，从而减少你的主包大小见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。您可能还需要散列其他资源。
希望对你有帮助:)
【讨论】：
以上是关于使用 Laravel Mix 的 Webpack 块名称的主要内容，如果未能解决你的问题，请参考以下文章
使用 Laravel Mix 时如何包含 webpack 插件？
未捕获的 ReferenceError：使用 laravel-mix webpack 时未定义 Vue
Vue - 由于 webpack 版本（vue-cli-service、laravel-mix、webpack）导致 npm run serve 命令崩溃