Webpack块在单独的文件夹中

我想在我的应用程序中实现代码分割功能。我通过路线分割我的应用程序，并且为我导入组件的用户require.ensure的每条路线分割我的应用程序。我试图把在块文件夹中所有的块，所以我在配置文件中改变输出：Webpack块在单独的文件夹中

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。我怎样才能在一个文件夹中移动所有的块。这是使用代码分割功能的正确方法。

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

来源

2017-02-21 Klark

首先包括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文件的示例

来源

2017-02-23 10:40:37

Webpack块在单独的文件夹中

回答

相关问题