单独文件夹中的 Webpack 块 [英] Webpack Chunks In Separate Folder
问题描述
我想在我的应用中实现代码拆分功能.我按路线拆分我的应用程序,对于每条路线,我都使用 require.ensure
导入组件.我尝试将所有块放在块文件夹中,因此我更改了配置文件中的输出:
I want to implement code-splitting feature in my app. I split my app by routes and for every route I user require.ensure
to import component. I try to put all chunks in chunk folder, so I change output in config file:
output: {
filename: "chunks/bundle[name].js"
}
但是我收到了 404 错误.
But I got 404 error.
错误:加载块 2 失败HTMLScriptElement.onScriptComplete
Error: Loading chunk 2 failed at HTMLScriptElement.onScriptComplete
所以我把它留在我有捆绑文件的文件夹中:
So I leave it in folder where I have bundle file:
var webpack = require("webpack");
module.exports = {
entry: "./js/app.js",
output: {
filename: "./bundle.js"
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
loader:"babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: "file-loader?name=element-ui/[name].[ext]"
}
]
},
resolve: {
extensions: [ ".json", ".js", ".vue", ".css" ]
},
watch: true
};
现在可以工作了,但我得到了这样的块结构:文件夹块结构.如何仅在一个文件夹中移动所有这些块.这是使用代码拆分功能的正确方法.
An now works, but I got chunk structure like this: folder chunk structure. How can I move all that chunks in only one folder. And is this proper way of using code-splitting feature.
我想我错过了一些东西.请帮忙!
I think I'm missing something. Please help!
推荐答案
首先在 webpack.config
文件顶部包含路径模块:
First of all include path module at the top of webpack.config
file.:
var path = require("path");
因为你有多个块文件,你的输出点需要有 filename
和 chunkFilename
属性和 [name]
或 [id]
.文件结构的问题是你没有定义 publicPath:
Because you have multiple chunk files, your output point need to have filename
, and chunkFilename
property with [name]
or [id]
. Problem with file structure is that you didn't define publicPath:
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist/',
chunkFilename: '[name].js'
}
现在每个块文件和其他包如 main.js
、vendor
、manifest
文件都将在 dist/代码>文件夹.这是webpack.config.js 文件
Now every chunk file and other bundles like main.js
, vendor
, manifest
file will be in dist/
folder.
Here is example of webpack.config.js file
这篇关于单独文件夹中的 Webpack 块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!