Webpackチャンク（別フォルダ）

Question

私のアプリにコード分割機能を実装したい。私は経路を使ってアプリケーションを分割し、すべての経路Iユーザ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 
}; 

をAnが動作するようになりましたが、私はこのようにチャンクの構造を得た：folder chunk structure。どのようにして、すべてのチャンクを1つのフォルダだけに移動できますか？そして、コード分割機能を使用するこの適切な方法です。

私は何かが不足していると思う。 助けてください！すべての

Answer 1

まずwebpack.configファイル：の上部にあるパスモジュールを含む

var path = require("path"); 

あなたは、複数のチャンクファイルを持っているので、あなたの出力点が[name]または[id]でfilename、およびchunkFilename性質を持っている必要があります。ファイル構造に問題があなたがpublicPathを定義していないということです。

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

今すぐすべてのチャンクファイルやmain.jsのような他のバンドル、vendorを、manifestファイルがdist/フォルダになります。 webpack.config.jsファイルの例を次に示します。