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

此外，拆分這樣的代碼最終使你的網站速度更快，因爲它不要求用戶重新下載供應商文件，如果它們已被緩存