单独文件夹中的 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屋！