Webpack 块在单独的文件夹中答案

【问题标题】：Webpack Chunks In Separate FolderWebpack 块在单独的文件夹中
【发布时间】：2017-07-11 11:25:59
【问题描述】：

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

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

但我收到 404 错误。

错误：加载块 2 失败于 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
};

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

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

【问题讨论】：

标签： webpack webpack-2

【解决方案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 文件的示例

【讨论】：