VueのデフォルトWebpack設定で単一出力bundle.jsを生成

Question

私はvueによって生成されたwebpack configを使用しています。ビルド中に./dist/ディレクトリに3つのjavascriptファイルが生成されます：app.js、manifest.jsおよびvendor.js。これらのファイルはすべてindex.htmlに含まれ、<script>となっています。これらのすべてを含む単一のbundle.jsを生成するようにwebpackを設定するにはどうすればよいですか？

webpackのデフォルトのvueの設定は膨大なので、そこで何が起こっているのか分かりません。私はの下にwebpack.base.conf.jsの下に添付しました。 vueのアプリを作成した場合、その他のファイルはすべて表示されます。npm install -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') 

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が含まれています。それは再ダウンロードベンダーにユーザーを必要とdoesntのよう

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

はまた、このようなコードを分割することは、最終的に、より速くあなたのサイトを作ります既にキャッシュされている場合はファイル