背景

Webpack構建後生成的包實在太大了，特別是大型專案，編譯後得到一個龐然大物真是個惡夢。

那麼問題來了，有解決辦法嗎？當然，我們可以指定一組檔案（元件）生成到一個或者多個目錄中去。

上程式碼。

指定元件目錄

編輯webpack.base.conf.js檔案，配置entry及output，程式碼如下：

module.exports = {
  entry: {
    'common': './src/components/Common.vue',
    'user-info': './src/components/UserInfo.vue',
    'order-info'
 
: './src/components/OrderInfo.vue'
  },
  output: {
    path: resolve('/static/'),
    filename: '[name].min.js',
  },
}

配置打包外掛

編輯webpack.prod.conf.js檔案，配置plugin，程式碼如下：

new HtmlWebpackPlugin({
  filename: 'order-info.html',
  template: 'order-info.html',
  chunks: ['common', 'order-info', ],
}),
new
 
 HtmlWebpackPlugin({
  filename: 'user-info.html',
  template: 'user-info.html',
  chunks: ['common', 'user-info', ],
})

執行構建

npm run build

這樣，在dist目錄裡面就生成了兩個檔案。