Webpack 块在单独的文件夹中

Question

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

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

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

我想我错过了什么。请帮忙！

Answer 1

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

var path = require("path");

因为你有多个chunk文件，所以你的输出点需要有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 文件

的示例

Answer 2

如果想把chunk文件和entry分开，可以试试下面的配置：

// webpack.config.js
module.exports = {
    // ...
    output : 
}

Webpack 块在单独的文件夹中

Webpack Chunks In Separate Folder

webpack

webpack-2