详解如何使用 vue-cli 开发多页应用

entry: {  app: './src/main.js',  app2: './src/main2.js',  app3: './src/main3.js',},

plugins:[  // https://github.com/ampedandwired/html-webpack-plugin  // 多页:index.html → app.js  new HtmlWebpackPlugin({   filename: 'index.html',//生成的html   template: 'index.html',//来源html   inject: true,//是否开启注入   chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源  }),  // 多页:index2.html → app2.js  new HtmlWebpackPlugin({   filename: 'index2.html',//生成的html   template: 'index2.html',//来源html   inject: true,//是否开启注入   chunks: ['app2']//需要引入的Chunk，不配置就会引入所有页面的资源  }),  // 多页:index3.html → app3.js  new HtmlWebpackPlugin({   filename: 'index3.html',//生成的html   template: 'index3.html',//来源html   inject: true,//是否开启注入   chunks: ['app3']//需要引入的Chunk，不配置就会引入所有页面的资源  })]

build: {  index: path.resolve(__dirname, '../dist/index.html'),  index2: path.resolve(__dirname, '../dist/index2.html'),  index3: path.resolve(__dirname, '../dist/index3.html'),},

plugins: [  // 多页:index.html → app.js  new HtmlWebpackPlugin({    filename: config.build.index,    template: 'index.html',    inject: true,    minify: {      removeComments: true,      collapseWhitespace: true,      removeAttributeQuotes: true      // more options:      // https://github.com/kangax/html-minifier#options-quick-reference    },    // necessary to consistently work with multiple chunks via CommonsChunkPlugin    chunksSortMode: 'dependency',    chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就会引入所有页面的资源  }),  // 多页:index2.html → app2.js  new HtmlWebpackPlugin({    filename: config.build.index2,    template: 'index2.html',    inject: true,    minify: {      removeComments: true,      collapseWhitespace: true,      removeAttributeQuotes: true    },    chunksSortMode: 'dependency',    chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就会引入所有页面的资源  }),  // 多页:index3.html → app3.js  new HtmlWebpackPlugin({    filename: config.build.index3,    template: 'index3.html',    inject: true,    minify: {      removeComments: true,      collapseWhitespace: true,      removeAttributeQuotes: true    },    chunksSortMode: 'dependency',    chunks: ['manifest','vendor','app3']//需要引入的Chunk，不配置就会引入所有页面的资源  }),]

// utils.jsexports.getEntry = function(globPath, pathDir) {  var files = glob.sync(globPath);  var entries = {},    entry, dirname, basename, pathname, extname;  for (var i = 0; i < files.length; i++) {    entry = files[i];    dirname = path.dirname(entry);    extname = path.extname(entry);    basename = path.basename(entry, extname);    pathname = path.join(dirname, basename);    pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;    entries[pathname] = ['./' + entry];  }  return entries;}

// webpack.base.conf.jsvar pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));pages.forEach(function (pathname) {  // https://github.com/ampedandwired/html-webpack-plugin  var conf = {    filename: '../views/' + pathname + '.html', //生成的html存放路径，相对于path    template: '../src/views/' + pathname + '.html', //html模板路径    inject: false,  //js插入的位置，true/'head'/'body'/false    /*     * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，     * 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项，     * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。     * 为避免压缩html，需要在html-loader上配置'html?-minimize'，见loaders中html-loader的配置。     */    // minify: { //压缩HTML文件    //   removeComments: true, //移除HTML中的注释    //   collapseWhitespace: false //删除空白符与换行符    // }  };  if (pathname in config.entry) {    conf.favicon = 'src/images/favicon.ico';    conf.inject = 'body';    conf.chunks = ['vendors', pathname];    conf.hash = true;  }  config.plugins.push(new HtmlWebpackPlugin(conf));});

// webpack.base.conf.jsentry: {  app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')},