单独文件夹中的 Webpack 块

Question

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

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

但是我收到了 404 错误。

错误：在 HTMLScriptElement.onScriptComplete 加载块 2 失败

所以我把它留在我有捆绑文件的文件夹中：

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

现在可以工作，但我得到了这样的块结构：文件夹块结构。如何仅在一个文件夹中移动所有块。这是使用代码拆分功能的正确方法。

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

Answer 1

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

var path = require("path");

因为您有多个块文件，所以您的输出点需要具有filename, 和chunkFilename带有[name]或 的属性[id]。文件结构的问题是你没有定义 publicPath：

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

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