Webpack 使用Vue'生成单个输出bundle.js；默认的网页包配置

我正在使用vue生成的网页包配置。这将在生成过程中生成3个javascript文件到

/dist/

目录：

app.js

、

manifest.js

和

vendor.js

。所有这些文件都以

的形式包含在

index.html

中。我如何配置webpack以仅生成包含所有这些内容的单个

bundle.js

默认vue的webpack配置非常庞大，所以我几乎无法理解那里发生了什么。我在下面附上了webpack.base.conf.js。如果创建vue的应用程序，您将找到的所有其他文件：

npm安装-g vue cli

，

vue init webpack myapp

（vue/router/eslink/karma/nightwatch单击“否”）。它们位于

/build

和

/config

目录中

var path=require（'path'））
var utils=require（“./utils”）
var config=require（“../config”）
var vueLoaderConfig=require（'./vue loader.conf'）
函数解析（dir）{
返回路径.连接（uu dirname，…，dir）
}
module.exports={
条目：{
应用程序：'./src/main.js'
},
输出：{
路径：config.build.assetsRoot，
文件名：'[name].js'，
publicPath:process.env.NODE_env==='production'
？config.build.AssetPublicPath
：config.dev.assetsPublicPath
},
决心：{
扩展：['.js'、'.vue'、'.json']，
别名：{
“vue$”：“vue/dist/vue.esm.js”，
“@”：解析（'src'）
}
},
模块：{
规则：[
{
测试：/\.vue$/,，
加载程序：“vue加载程序”，
选项：vueLoaderConfig
},
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
包括：[解析（'src'），解析（'test'）]
},
{
测试：/\（png | jpe？g | gif | svg）（\？*）$/，
加载器：“url加载器”，
选项：{
限额：10000，
名称：utils.assetsPath（'img/[name].[hash:7].[ext]'））
}
},
{
测试：/\（mp4 | webm | ogg | mp3 | wav | flac | aac）（\？*）$/，
加载器：“url加载器”，
选项：{
限额：10000，
名称：utils.assetsPath（'media/[name].[hash:7].[ext]'）
}
},
{
测试：/\（woff2？| eot | ttf | otf）（\？*）$/，
加载器：“url加载器”，
选项：{
限额：10000，
名称：utils.assetsPath（'font/[name].[hash:7].[ext]'）
}
}
]
}
}

是否只有在运行

npm运行build

时才执行此操作

如果是，则文件webpack.prod.conf.js包含CommonChunkPlugin：

 new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),

此外，像这样拆分代码最终会使您的站点更快，因为它不需要用户重新下载已经缓存的供应商文件