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塊在單獨的文件夾中

回答

相關問題