Webpack block 在单独的文件夹中

Question

我想在我的应用程序中实现代码拆分功能。我按路线拆分我的应用程序，并为我使用的每条路线 require.ensure导入组件。我尝试将所有 block 放在 block 文件夹中，因此我更改了配置文件中的输出:

output: {
   filename: "chunks/bundle[name].js"
}

但我收到 404 错误。

Error: Loading chunk 2 failed at HTMLScriptElement.onScriptComplete

所以我把它放在我有捆绑文件的文件夹中:

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
};

现在可以工作，但我得到了这样的 block 结构: folder chunk structure .我怎样才能将所有这些 block 移动到一个文件夹中。这是使用代码拆分功能的正确方法吗？

我想我错过了一些东西。
请帮忙!

Answer 1

首先在 webpack.config 的顶部包含路径模块文件。:

var path = require("path");

因为你有多个 block 文件，你的输出点需要有 filename , 和 chunkFilename [name] 的属性(property)或 [id] .文件结构的问题是您没有定义 publicPath:

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/',
    chunkFilename: '[name].js'
}

现在每个 block 文件和其他包，如 main.js , vendor , manifest文件将在 dist/文件夹。
这是 webpack.config.js 的示例文件