Webpack chunk 名称与 Laravel 混合
Webpack chunk names with Laravel Mix
我想将 Webpack 块与 Laravel 混合使用。目前输出这个列表：
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？
- 如何防止缓存块？
根据你的问题，我假设你正在构建一个使用 Vue 路由器的应用程序。
1) 要回答您的第一个问题，每当您以这种方式在路由定义中导入组件时 component: () => import('@/components/user')。你只是告诉 webpack 根据你在 vue 中的路由代码拆分你的应用程序包。
这允许您的路由组件延迟加载，从而减少您的主包大小，请参阅 https://router.vuejs.org/guide/advanced/lazy-loading.html。
每个 x.js 文件都是从路由定义中的动态组件导入创建的，并在需要时 automatically/lazily 加载。 （您可以打开控制台，在 xhr 选项卡下的不同路径之间导航，您将看到文件已加载。）
2) 对于你的第二个问题，请查看另一个问题
更新：
你也可以使用 HtmlWebpackPlugin，它有一个属性散列（布尔值），它会自动将一个唯一的 webpack 编译散列附加到所有包含的脚本和 css 文件。但是它只包括 css 和 js。您可能还需要散列其他资源。
希望对您有所帮助:)
默认情况下，分块文件编译到 public 文件夹的根目录。
就个人而言，我觉得这很烦人，尤其是对于大型项目，因为您最终可能会得到数百个 .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',
},
});
在您的 blade 中，确保您参考了正确的文件，如下所示：
<script src="{{ mix('js/main/app.js') }}"></script>
请注意，您可以将文件夹的名称从 main 或 chunks 更改为您喜欢的名称。
当我 运行 遇到这个问题时，我使用 filename 和 chunkFilename 搜索并将我的分块文件路由到内部文件夹，但当时我在浏览器路径中遇到了一些错误分块文件的数量是错误的。
我已经通过在我的 webpack.mix.config 文件和 mix.webPackConfig 中添加 publicPath 密钥解决了这个问题，请注意 public 路径可能会因您的环境而异，在大多数生产情况下它将是 / 并且在某些情况下在本地主机上它可能是 yourprojectfolder/public/.
mix.webpackConfig({
output: {
filename:'js/main/[name].js',
chunkFilename: 'js/chunks/[name].js',
publicPath: '/myprojectfolder/public/'
},
});
我想将 Webpack 块与 Laravel 混合使用。目前输出这个列表：
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？ - 如何防止缓存块？
根据你的问题，我假设你正在构建一个使用 Vue 路由器的应用程序。
1) 要回答您的第一个问题，每当您以这种方式在路由定义中导入组件时 component: () => import('@/components/user')。你只是告诉 webpack 根据你在 vue 中的路由代码拆分你的应用程序包。
这允许您的路由组件延迟加载，从而减少您的主包大小，请参阅 https://router.vuejs.org/guide/advanced/lazy-loading.html。 每个 x.js 文件都是从路由定义中的动态组件导入创建的，并在需要时 automatically/lazily 加载。 （您可以打开控制台，在 xhr 选项卡下的不同路径之间导航，您将看到文件已加载。）
2) 对于你的第二个问题，请查看另一个问题
更新： 你也可以使用 HtmlWebpackPlugin，它有一个属性散列（布尔值），它会自动将一个唯一的 webpack 编译散列附加到所有包含的脚本和 css 文件。但是它只包括 css 和 js。您可能还需要散列其他资源。
希望对您有所帮助:)
默认情况下，分块文件编译到 public 文件夹的根目录。
就个人而言，我觉得这很烦人，尤其是对于大型项目，因为您最终可能会得到数百个 .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',
},
});
在您的 blade 中，确保您参考了正确的文件，如下所示：
<script src="{{ mix('js/main/app.js') }}"></script>
请注意，您可以将文件夹的名称从 main 或 chunks 更改为您喜欢的名称。
当我 运行 遇到这个问题时，我使用 filename 和 chunkFilename 搜索并将我的分块文件路由到内部文件夹，但当时我在浏览器路径中遇到了一些错误分块文件的数量是错误的。
我已经通过在我的 webpack.mix.config 文件和 mix.webPackConfig 中添加 publicPath 密钥解决了这个问题，请注意 public 路径可能会因您的环境而异，在大多数生产情况下它将是 / 并且在某些情况下在本地主机上它可能是 yourprojectfolder/public/.
mix.webpackConfig({
output: {
filename:'js/main/[name].js',
chunkFilename: 'js/chunks/[name].js',
publicPath: '/myprojectfolder/public/'
},
});