在使用vue-cli初始化vue項目時,默認打包為單入口,有時候一個項目可能會有不同入口,在這種情況下,就需要我們稍微修改下webpack配置文件了,具體步驟如下:
1、修改webpack.base.config.js單入口改為多入口
1 entry: { 2 app: ["babel-polyfill", './src/main.js'], 3 test: ['./src/test.js'] 4 },
2、在不同環境的webpack配置文件中增加HtmlWebpackPlugin配置(如webpack.prod.config.js)
1 new HtmlWebpackPlugin({ 2 filename: 'test.html', 3 template: 'test.html', 4 inject: true, 5 minify: { 6 removeComments: true, 7 collapseWhitespace: true, 8 removeAttributeQuotes: true 9 // more options: 10 // https://github.com/kangax/html-minifier#options-quick-reference 11 }, 12 // necessary to consistently work with multiple chunks via CommonsChunkPlugin 13 chunks: ['test'] 14 }),
chunks中文意思為塊,對應的名稱是打包入口,不配置該屬性會引用配置的所有entry。如下配置打包后的結果如下圖:
打包結果:
test.html
index.html