vue多页面项目配置

全局配置

打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口

entry: {
  main: \'./src/main.js\',
  main2: \'./src/main2.js\',
  main3: \'./src/main3.js\',
},

run dev 开发环境

修改 webpack.dev.conf.js

打开 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

chunks: [\'main\']中的main对应的是webpack.base.conf.js中entry设置的入口文件

plugins:[
  // <a rel="nofollow" href="https://github.com/ampedandwired/html-webpack-plugin" target="_blank">https://github.com/ampedandwired/html-webpack-plugin</a>
  // 多页:index.html → main.js
  new HtmlWebpackPlugin({
   filename: \'index.html\',//生成的html
   template: \'index.html\',//来源html
   inject: true,//是否开启注入
   chunks: [\'main\']//需要引入的Chunk，不配置就会引入所有页面的资源
  }),
  // 多页:index2.html → main2.js
  new HtmlWebpackPlugin({
   filename: \'index2.html\',//生成的html
   template: \'index2.html\',//来源html
   inject: true,//是否开启注入
   chunks: [\'main2\']//需要引入的Chunk，不配置就会引入所有页面的资源
  }),
  // 多页:index3.html → main3.js
  new HtmlWebpackPlugin({
   filename: \'index3.html\',//生成的html
   template: \'index3.html\',//来源html
   inject: true,//是否开启注入
   chunks: [\'main3\']//需要引入的Chunk，不配置就会引入所有页面的资源
  })
]

run build 编译

修改 config/index.js

打开~\config\index.js，找到build下的index: path.resolve(__dirname, \'../dist/index.html\')，在其后添加多页

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

修改 webpack.prod.conf.js

打开~\build\webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 build

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

页面较多时，可以用循环将 HtmlWebpackPlugin 添加到 plugins

// utils.js
exports.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.js
var pages = Object.keys(utils.getEntry(\'../src/views/**/*.html\', \'../src/views/\'));
pages.forEach(function (pathname) {
  // <a rel="nofollow" href="https://github.com/ampedandwired/html-webpack-plugin" target="_blank">https://github.com/ampedandwired/html-webpack-plugin</a>
  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));
});

同样入口 entry 也可以使用

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

引用自如何使用 vue-cli 开发多页应用方法