使用Vue的默认webpack配置生成单输出bundle.js

Question

我正在使用由vue生成的webpack配置。这会在生成过程中产生3个JavaScript文件到./dist/目录：app.js,manifest.js和vendor.js。所有这些文件都包含在index.html中，作为<script>。我如何配置webpack生成只包含所有这些的单个bundle.js？

默认vue的webpack配置很大，所以我几乎无法理解那里发生了什么。我附上下面webpack.base.conf.js。所有其他文件，你会发现，如果你创建vue的应用程序：npm install -g vue-cli，vue init webpack myapp（vue/router/eslink/karma/nightwatch click to NO）。它们位于./build和./config目录中。

var path = require('path') 
var utils = require('./utils') 
var config = require('../config') 
var vueLoaderConfig = require('./vue-loader.conf') 

function resolve (dir) { 
    return path.join(__dirname, '..', dir) 
} 

module.exports = { 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: config.build.assetsRoot, 
    filename: '[name].js', 
    publicPath: process.env.NODE_ENV === 'production' 
     ? config.build.assetsPublicPath 
     : config.dev.assetsPublicPath 
    }, 
    resolve: { 
    extensions: ['.js', '.vue', '.json'], 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
     '@': resolve('src') 
    } 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: vueLoaderConfig 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     include: [resolve('src'), resolve('test')] 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url-loader', 
     options: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 
     loader: 'url-loader', 
     options: { 
      limit: 10000, 
      name: utils.assetsPath('media/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     loader: 'url-loader', 
     options: { 
      limit: 10000, 
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
     } 
     } 
    ] 
    } 
} 

Answer 1

这是只有当您运行npm run build？

如果是的话，该文件webpack.prod.conf.js包含CommonsChunkPlugin：

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'] 
    }), 

此外，拆分这样的代码最终使你的网站速度更快，因为它不要求用户重新下载供应商文件，如果它们已被缓存